Home >Web Front-end >Front-end Q&A >What are the triggering methods for css3 transition?
What are the triggering methods for css3 transition?
- 青灯夜游Original
- 2021-12-15 11:20:192828browse
There are 2 triggering methods for css3 transition: 1. Triggered by pseudo-class elements, including ":hover", ":focus", ":checked", etc.; 2. Triggered by JS, using js or Jquery The code modifies the CSS properties and triggers the gradient of the transition.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
#transition
transition is the simplest animation in CSS3. When the properties of an element change, it can be presented in a gradient; the following code is an example on w3c, The result of adding transition is that when hovering, the length will gradually increase to 300px.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>css3 transition triggering method
First way: Pass Pseudo-class elements are triggered, including hover, focus, checked, etc.
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box:hover{
width: 400px;
}
</style>
<p class="box"></p>But in actual use, we mostly use JS or Jquery to directly modify attributes, but we found that this does not work.
Second: Triggered through JS
If you use JS or Jquery to directly modify CSS properties
The JS triggering method should be that its class changes So that new styles can be obtained.
My understanding is that the element must be changed to make it different so that it can acquire some new attributes. This is the case for pseudo-class triggering. For JS triggering, it should be that its class changes so that it can Get new styles.
By adding a newclass to p, causing p to change and obtain the class, the gradient of the transition can be triggered.
<style>
.box{
width: 100px;
height: 100px;
background-color: blueviolet;
transition: width 1s linear .5s;
}
.box1{
width: 400px;
}
</style>
<p class="box"></p>
<scrpit>
setTimeout(() => {
let element = document.getElementsByClassName('box')[0];
element.classList.add('box1')
}, 1)
</scrpit>(Learning video sharing: css video tutorial)
The above is the detailed content of What are the triggering methods for css3 transition?. For more information, please follow other related articles on the PHP Chinese website!