使用css过渡有哪些触发方式

触发方式有：1、通过伪类元素“:hover”触发，语法“元素{ transITion:属性 过渡时间} 元素:hover{ 属性:属性值} ”；2、通过“element.classList.add("元素名称")”语句触发css过渡效果。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

第一种： 通过伪类元素触发

	style>
		.box{
          		width: 100px;
          		height: 100px;
          		background-color: blueviolet;
          		transition: width 1s linear .5s;
    	}
    	.box:hover{
          		width: 400px;
    	}
    	/style>
    	p class="box">
        /p>
    

第二种： 通过JS触发

通过js添加必须有一定的延迟(延迟去掉无效果)来改变元素的样式

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>
    

推荐学习：css视频教程

以上就是使用css过渡有哪些触发方式的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！