Question

我正在制作一个简单的自定义按钮，并且我希望在单击按钮时为某些div的背景颜色添加延迟效果。我使用聚合物行为（Iron.control.state和Iron.Button.State）作为活动状态。

当点击按钮transition-delay:时，显然:host([active])的CSS属性不起作用。其余的工作正常。

这是我的简化代码：

<dom-module id="my-button">
  <style>
    :host {
      display: block;
      text-transform: uppercase;
    }
    .button{
      width: 280px;
      height: 50px;
      margin: 12px 0px 0px;
    }
    .icon {
      --iron-icon-height: 40px;
      --iron-icon-width: 40px;
      fill: #b4b4b4;
    }
    .tab1, .tab2, .tab3{
      width: 20px;
      height: 50px;
      transition: bacbackground-color .2s ease-out;  /*This Will Animate*/
    }
    :host([active])
      .tab1{
        background-color: #18307a;
        transition-delay: .15s;  /* This Does'nt Work!*/
      }
    :host([active])
      .tab2{
        background-color: #1a35a8;
        transition-delay: .2s;  /* This Does'nt Work!*/
      }
    :host([active])
      .tab3{
        background-color: #1936ce;
        transition-delay: .25s;  /* This Does'nt Work!*/
      }

    :host([active])
      .menu-icon{
        fill: #1936ce;
      }

  </style>

  <template>

    <div class="button layout horizontal center">
      <iron-icon icon="my-icons:icon" class="icon"></iron-icon>
      <div class="flex">{{label}}</div>
      <div class="tab1"></div>
      <div class="tab2"></div>
      <div class="tab3"></div>
    </div>

  </template>

  <script>
    Polymer({
      is: 'my-button',

      properties: {
        label: String
      },

      behaviors: [
        Polymer.IronControlState,
        Polymer.IronButtonState
      ],

      hostAttributes: {
        role: 'button'
      }

    });
  </script>
</dom-module>

Answer 1

我认为您正在尝试应用transition而不是transition-delay。如果您要尝试transition-delay，请确保同时应用transition。

:host([active]) .tab1 {
  background-color: #18307a;
  transition: background-color 2s;
  transition-delay: 0.15s;
}

更新

在切换到活动状态之前，您希望css转换延迟处于活动状态。

.tab1 { transition-delay: 0.15s; } .tab2 { transition-delay: 0.20s; } .tab3 { transition-delay: 0.25s; }

请注意，它们未嵌套在:host([active])。

按钮Polymer 1.0上的CSS Transition延迟

1 个答案: