Question

我有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 here

上托管了一些代码

on that commit我用风格创建了一个孩子。如果您加载页面，您将看到动画

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

and the last one除动画外的所有风格

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

Answer 1

我认为:host不能以这种方式使用。

这应该有用。

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

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

如何在关键帧中使用/ deep / in polymer

1 个答案: