Question

这怎么可能不可能？

这是一个完整的（非）工作示例，您可以复制/粘贴到jsbin中：

<!DOCTYPE html>
<html> 
<head>

  <meta charset="utf-8">
  <title>Polymer Bin</title>

  <link href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html" rel="import" >
  <link href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer-element.html" rel="import" >
  <style>
  </style>
</head>

<body>


  <dom-module id='x-inside'>
    <template>
      <style>
        div {
          @apply --x-inside-div;
        }

       /* 
        THIS WORKS:
        div {
          animation: .3s infinite bounce;
        }

        @keyframes bounce {
          0% { transform: translate(0px); }
          50% { transform: translate(100px); }
          100% { transform: translate(0); }
        }
        */
      </style>
      <div>[[greeting]]</div>
    </template>

    <script>
      class XInside extends Polymer.Element {
        static get is () { return 'x-inside'; }
        static get properties () {
          return {
            greeting: {
              type: String,
              value: 'Hi',
            },
          };
        }
      }

      window.customElements.define(XInside.is, XInside);
    </script>
  </dom-module>

  <dom-module id='x-app'>
    <template>
      <style>
        x-inside {
          --x-inside-div: {
            animation: .3s infinite bounce;
          };
        }

        @keyframes bounce {
          0% { transform: translate(0px); }
          50% { transform: translate(100px); }
          100% { transform: translate(0); }
        }
      </style>

      <x-inside></x-inside>
    </template>

    <script>
      class App extends Polymer.Element {
        static get is () { return 'x-app'; }
      }

      window.customElements.define(App.is, App);
    </script>
  </dom-module>

  <x-app></x-app>
</body>

</html>

我的元素如何使用关键帧为其他元素的内部设置动画效果？

0 个答案: