Home > Developer > JavaScript
Javascript judges the callback function of css3 animation end css3 animation end, css3 callback function
In the css3 era, css3 -- animation is all possible;
Traditional JavaScript can use callback functions to determine whether the animation ends. Even if CSS technology is used to generate the animation effect, JavaScript can still capture the animation or transform the ending event;
The transitionend event and the standard browser event of the animationend event, but you still need to use the WebKit prefix in the webkit browser, so we have to detect the event separately based on various browsers
Copy codeThe Code is as follows:
Var transitions = {
'Transition ': 'transitionend ',
'Ostransition ': 'ostransitionend ',
'Upload upload': 'deletionend ',
'Webkitupload': 'webkittransitionend'
}
The source code is attached below:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> suface js determines whether css animation ends </title>
</Head>
<Body>
<P> the callback function is triggered once the animation or transformation ends. Large class libraries are no longer needed. <Br> </p>
<Style type = "text/css">
. Sample {
Width: 200px;
Height: 200px;
Border: 1px solid green;
Background: lightgreen;
Opacity: 1;
Margin-bottom: 20px;
Transition-property: opacity;
/* Transition-duration:. 5 s ;*/
Transition-duration: 3 s;
}
. Sample. hide {
Opacity: 0;
}
</Style>
<Div class = "sample"> over-slowly hiding css3 Animations (transition-duration: 3 s;) </div>
<P> <button onclick = "this. style. display = 'none'; startFade ();"> fade away slowly and detect the event </button> </p>
<Script>
(Function (){
Var e = document. getElementsByClassName ('sample') [0];
Function whichTransitionEvent (){
Var t;
Var el = document. createElement ('fakeelement ');
Var transitions = {
'Transition ': 'transitionend ',
'Ostransition ': 'ostransitionend ',
'Upload upload': 'deletionend ',
'Webkitupload': 'webkittransitionend'
}
For (t in transitions ){
If (el. style [t]! = Undefined ){
Return transitions [t];
}
}
}
Var transitionEvent = whichTransitionEvent ();
TransitionEvent & e. addEventListener (transitionEvent, function (){
Alert ('css3 motion ends! I am a callback function and have not used a third-party class library! ');
});
StartFade = function (){
E. className + = 'hide ';
}
}) (); <Br> </script>
</Body>
</Html>
The above is the javascript method described in this article to determine the end Of the CSS3 animation. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
