CODEWITHSUNDEEP
javascripthtmlcssanimation
physicsboy
physicsboy

Reputation: 6326

No exit animation applied - Polymer

I have a paper-icon-button that animates (spin & opacity) when I hover an image using on-mouseenter and on-mouseleave.

The animations occur properly on-mouseenter, but the paper-icon-button simply disappears on-mouseleave rather than repeating the animation.

Can anybody help?

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');
   }
}

Upvotes: 0

Views: 31

Answers (1)

Frits
Frits

Reputation: 7614

That's because visibility:hidden; and it's counterpart is not an animatable CSS property. (See dev docs regarding interpolation)

Change your CSS rule to:

.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);
}

The visibility property is unnecessary in any case thanks to your use of opacity.

Upvotes: 2

Related Questions