なし出口アニメーション - ポリマー

Question

は私はon-mouseenterとon-mouseleaveを使用してイメージを置くと（スピン&不透明度）アニメーションpaper-icon-buttonを有していません。

アニメーションが正しく発生するon-mouseenterですが、アニメーションを繰り返すのではなく、ペーパーアイコンボタンが単に消えてon-mouseleaveになります。

誰でも手伝いできますか？ visibility:hidden;ためだ

HTML

<img id="avatar" class="userAvatar" src="../images/hipster.png" slot="item-icon" on-mouseenter="cogSpin" on-mouseleave="cogSpin"></img> 
<paper-icon-button id="cogSpin" icon="settings" class="cog" on-click="doSomething"></paper-icon-button> 

CSS

.cog { 
    position: fixed; 
    color: white; 
    top: 129px; 
    left: 64px; 
    opacity: 0; 
    transition: opacity 1s, transform ease-in-out 1s; 
    visibility: hidden; 
} 

.cogOn { 
    visibility: visible; 
    opacity: 1; 
    transform:rotate(360deg); 
} 

JS

cogSpin : function() { 
// css class only applied if the drawer containing it has been expanded 
    if(this.$.drawer.classList.contains('drawerExpand')) { 
     this.$.cogSpin.classList.toggle('cogOn'); 
    } 
} 

Answer 1

とその相手はアニメーション可能なCSSプロパティではありません。 （See dev docs regarding interpolation）

あなたのCSSルールが変更に

：

.cog { 
    position: fixed; 
    color: white; 
    top: 129px; 
    left: 64px; 
    opacity: 0; 
    transition: opacity 1s, transform ease-in-out 1s; 
} 

.cogOn { 
    opacity: 1; 
    transform:rotate(360deg); 
} 

visibilityプロパティは、どのような場合にopacityのご利用に感謝不要です。