Shulou(Shulou.com)06/02 Report--

This article will explain in detail several ways to trigger the transition of css3. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

There are two ways to trigger css3 transition: 1, triggered by pseudo-class elements, including ": hover", ": focus", ": checked" and so on; 2, through JS trigger, use js or Jquery code to modify CSS attributes, and then trigger the gradient of transition.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Transition

   transition is the simplest animation in CSS3. When the attribute of an element changes, it can be rendered in a gradual way. The following code is an example on W3C, and the result of adding transition is that when hover is added, the length will gradually increase to 300px.

Div {width:100px;height:100px;background:blue;transition:width 2s; / * Firefox 4 * /-webkit-transition:width 2s; / * Safari and Chrome * /-o-transition:width 2s; / * Opera * /} div:hover {width:300px;}

Please move the mouse pointer over the blue div element to see the transition effect.

Note: this example is not valid in Internet Explorer.

The trigger mode of css3 transition

First: triggered by pseudo-class elements, including hover, focus, checked, etc.

.box {width: 100px; height: 100px; background-color: blueviolet; transition: width 1s linear .5s;} .box: hover {width: 400px;}

But in practice, we are more likely to use JS or Jquery to modify properties directly, but we find that this is not possible.

The second kind: triggered by JS

If you use JS or Jquery to modify the CSS property directly

JS should be triggered by a change in its class so that it can get a new style.

My understanding is that what must happen to the element makes it a little different to get some new attributes, and for pseudo-class triggers, the way for JS triggers should be that its class changes so that it can get a new style.

By adding the class of newclass to p to change p to get the class, you can trigger the gradient of transition.

.box {width: 100px; height: 100px; background-color: blueviolet; transition: width 1s linear .5s;} .box1 {width: 400px;}

SetTimeout (()) = > {let element = document.getElementsByClassName ('box') [0]; element.classList.add (' box1')}, 1) this is the end of this article on "there are several ways to trigger the transition of css3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.