如何在关键帧的聚合物中使用 /deep/

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我用is风格创建了一个孩子。如果您加载页面，您将看到动画

on this one我把child el放到他的parent里面，把style代码移到parent里面。孩子表现得像没有风格

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

克隆 repo 并使用 '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;
        }
    }