Closed manglobe closed 6 years ago
I don't understand your point. Isn't it the way it works right now? Can you make yourself clear?
@eltonmesquita Emmm……It's my wrong. There's something wrong with my explanation. ` \<div style="width:100px;height:100px;background:#ff4400" class="animated animated3 pulse">\<\/div>
\<div style="width:100px;height:100px;background:#000" class="animated animated4 flash ">\<\/div> `
Just like that. You know we always use several animation in one page . So use ['animated'+number] to defined "animation-duration" .
.animated3 { animation-duration: 3s; } .animated4 { animation-duration: 4s; }
And then I try to controlling all the animation by "removeClass('animated)" & "addClass ('animated')" .
Of course it not works. Because the "animated3" defined a "animation-duration".
So I think , if the animation can be defined like this
.animated.flash { animation-name: flash; }
It will be More easily to control.
What you're trying to tell is that the animated shouldn't define a duration? Is that it? If that's the problem just use a selector with higher specificity like .parent-element > .animated.flash
and set the duration in this selector.
@eltonmesquita No, I means that, if I use "animate.css" as base style, because I need the animation curves., then I redefined the duration as I need. Just like this:
<link href="animate.scss">
<style>
.time1{
animation-duration: 0.1s;
}
.time2{
animation-duration: 0.2s;
}
</style>
<div class="animated time1 pulse"></div>
<div class="animated time2 flash "></div>
OK, these two div
works well. But now I need to stop them at the same time. after event A
, And then after event B
I need to replay them at the same time.
So I try to write this code to controller them :
window.addEventLisenter('event A', function(){
$('div').removeClass('animated')
});
window.addEventLisenter('event B', function(){
$('div').addClass('animated')
})
It not works, because the two div
had a new duration.
That's the problem, the className animated
just defined the duration, but the duration is always be changed as project need. That means, the className animated
is useless, set a default duration, into each animation className, is not different.
Now, 'animation.css' defined animation like this:
@keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
animation-name: flash;
}
But I think ,this will be more easily to control:
.animated.flash {
animation-name: flash;
}
Actually, the .animated
class is just a helper. You can and should use your own classes when needed. Animated.css is just a library, not a framework. It has an "use as want/need" approach.
I think that the default behavior is good enough for general use and I don't see the need for changing it. I'll close this as I don't think it'll make things better.
Feel free to reopen it if you have more arguments for it :D.
I used it for the first time.And I try to use javascript to controlling all the "animated" class ,then I see all the animetions still works,because the animation is just defined by class "animeName". So why not use ".animated.animeName" to define animation?