I'm trying to fade away something from the screen, using:
comp.addStyleName("fade-out");
.fade-out {
@include valo-animate-out-fade(2500ms, 1000ms);
}
But as soon as the animation ends, it's back on screen as before. Is there any way to get a callback when the animation is done, so I call remove it. Or maybe there is a way to do it in pure SCSS?
I also see that once the animation ran a can't run it again (by removing and adding back style). Is this expected behavior?
EDIT: The second issue was because I remove and add the styles in a listener one after the other. The client will not notice that anything changed, so will not animate. This is corrected by using server pushing, so the removal and new apply is in separate communications.
EDIT 2: Using push I can remove it by spawning a thread, sleeping for the time of the animation and removing. It works, but sounds really ugly. Any better way?
But as soon as the animation ends, it's back on screen as before
.fade-out {
@include animation(valo-animate-out-fade 2500ms 500ms forwards);
}
forwards specifies that the target will retain the computed values set by the last keyframe encountered during execution [1]. Note also that I'm not including valo-animate-out-fade directly, because the latter is defined as:
@mixin valo-animate-out-fade ($duration: 180ms, $delay: null){
@include animation(valo-animate-out-fade $duration $delay backwards);
}
I also see that once the animation ran a can't run it again (by removing and adding back style). Is this expected behavior?
Yes. Remember that Vaadin only communicate changes to the client-side. Since you are removing and adding the style in the same listener call, there are no changes to communicate (i.e. the browser won't be told that the style was removed and added again, then it won't reset the animation).
Is there any way to get a callback when the animation is done, so I call remove it. Or maybe there is a way to do it in pure SCSS?
You cannot remove the component from the DOM by using CSS only (although it will remain hidden if you specify that the animation fills forwards). There is also an approach in [2] by using a Javascript extension, which is similar to the answey by @pirho.