What are the triggering methods for css3 transition?-Front-end Q&A-php.cn

What are the triggering methods for css3 transition?

青灯夜游

Release： 2021-12-15 11:20:19

Original

2817 people have browsed it

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.

What are the triggering methods for css3 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>

Copy after login

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>

Copy after login

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(&#39;box&#39;)[0];
      element.classList.add(&#39;box1&#39;)

    }, 1) 
</scrpit>

Copy after login

(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!