1

我有 2 个聚合物成分，一个父母和一个孩子。因为我知道我将不得不创建更多的孩子，所以我想将我的 css 代码移动到父母中，这样每个孩子都可以使用它。我说移动我的代码，直到现在使用该代码一切都很好。

旧代码 

        .decale01 {
            -webkit-animation-name: decale;
            -webkit-animation-fill-mode: forwards;
        }

        @-webkit-keyframes decale {
            0% {
                top: 0;
            }
            100% {
                top: -40px;
            }
        }

新代码 

        :host /deep/ .decale {
            -webkit-animation-name: decale;
            -webkit-animation-fill-mode: forwards;
        }

        @-webkit-keyframes decale {
            0% {
                top: 0;
            }
            100% {
                top: -40px;
            }
        }

似乎它不适用于动画，或者我必须为此做额外的工作......有什么想法吗？其他解决方案？干杯！

更新

我在这里在 bitbucket 上托管了一些代码

在那次提交中，我创建了一个风格为 is 的孩子。如果您加载页面，您将看到动画

在这一点上，我将孩子 el 放在他的父母中，并在父母中移动样式代码。孩子表现得像他没有风格

和最后一个除动画外的所有风格作品

克隆 repo 并使用 'pub get' 和 'pub serve' 来查看动画

4

1 回答 1

0

我不认为:host可以这样使用。

这应该有效。

    * /deep/ .decale {
        -webkit-animation-name: decale;
        -webkit-animation-fill-mode: forwards;
    }

    @-webkit-keyframes decale {
        0% {
            top: 0;
        }
        100% {
            top: -40px;
        }
    }
于 2014-12-31T14:28:58.300 回答