聚合物1.0按鈕上的CSS過渡延遲

Question

我正在製作一個簡單的自定義按鈕，並且當單擊該按鈕時，我想爲某些div的背景色添加延遲效果。我正在使用聚合物行爲（Iron.control.state和Iron.Button.State）作爲活動狀態。

顯然當按鈕被點擊時transition-delay:的CSS屬性:host([active])，不起作用。其餘的工作正常。

這裏是我的簡化代碼：

<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])中。