css3过渡有哪些触发方式
- 来源:网络
- 更新日期:2022-02-17
摘要：css3过渡有2种触发方式：1、通过伪类元素触发，包括“:hover”、“:focus”、“:checked”等方式；2、通过JS触发，使用js或Jquery代码修改CSS属性，进而触发transition的渐变。本教程
css3过渡有2种触发方式：1、通过伪类元素触发，包括“:hover”、“:focus”、“:checked”等方式；2、通过JS触发，使用js或Jquery代码修改CSS属性，进而触发transition的渐变。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
transition
transition是CSS3最简单的动画, 当元素的属性发生改变能够以渐变的方式呈现出来; 如下代码是w3c上的一个示例, 加上了transition的结果就是在hover时, 长度会逐步增加到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过渡的触发方式
第一种： 通过伪类元素触发，包括hover、focus、checked等方式
<style> .box{ width: 100px; height: 100px; background-color: blueviolet; transition: width 1s linear .5s; } .box:hover{ width: 400px; }</style><p class="box"></p>但是实际使用当中我们更多的是使用JS或者Jquery直接修改属性, 但是工作中发现这样不行。
第二种： 通过JS触发
如果使用JS或者Jquery直接修改CSS属性
JS触发方式应当是它的class发生改变以至于能够得到新的样式。
我的理解是必须元素发生什么改变使得它有了一些不同从而获取到一些新的属性，对于伪类触发是这样，对于JS触发方式应当是它的class发生改变以至于能够得到新的样式。
通过给p添加newclass的类使得p发生改变获取到该类， 能够触发transition的渐变。
<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视频教程）
相关文章推荐
网站谷歌评分90+意味着什么?2022-09-06
怎样将不安全网站变成安全网站访问？2022-09-26
网站排名下降，可能跟算法更新没关系2022-09-20
网站如何设置高质量的网页标题？2022-09-14
做外贸网站选哪些语言？法语、德语最吃香2022-09-13