Using JS to trigger css3-transition transition animation __JS

using JS to trigger css3-transition transition animation

After these days of work, let me further understand the CSS3 of the powerful, the original many need JS to achieve the animation effect, now through the CSS3 can be easily realized, but CSS3 also has its own shortcomings, such as the animation set off on the trigger on no JS flexible, So I began to consider the use of CSS3 and JS combined.

However, be aware of CSS3 property compatibility issues

Usually we use the transition animation directly

Mouse placed on the DIV box to trigger the animation effect (mouse suspension div can trigger)

<! DOCTYPE html>
 
Now if you want to use JS Control transition Transition Animation how to do it.
At first I wanted to change the classname, just like the CSS control animation, but found no animation effect.
Later, after a discovery, it was OK to manipulate its CSS properties through the DOM.


For example, the CSS settings for Div are as follows

div{
    width:200px;
    height:200px;
    Transition:all 1s;
}
 
Then in JS through the DOM operation to change the specific attributes of the div CSS, such as
Obj.style.width= "400px"
This will trigger a CSS transition animation.

The following example for the successful use of JS set off CSS3 animation (mouse click Trigger)

<!
    DOCTYPE html> 
 
  a place to note:  
 Today in the work of the unintentional discovery, when the element itself is display:none, if at this time we want to pass JS first turn it into Display:block And then trigger the other desired transition transition effect, you need to change the JS to Display:block after the delay of about 100ms time to set up other transition animation, otherwise the transition animation will not trigger. 
 
 
 When I have time I will organize it into another blog post.