前端开发入门效果分享：过渡效果触发时机的问题

前端开发入门效果分享|前端开发者

过渡效果想必很多同学都熟悉了，比如：
html 代码

<style><br /><br /> div {<br /><br /> width: 100px;<br /><br /> height: 40px;<br /><br /> background: #92B901;<br /><br /> font-size: 14px;<br /><br /> opacity: 0.5;<br /><br /> transform: none;<br /><br /> transition-property: width,height,background,font-size,opacity,transform;<br /><br /> transition-duration: 1s,1s,1s,1s,1s,1s;<br /><br /> border-radius: 5px;<br /><br /> font-weight: bold;<br /><br /> color: #ffffff;<br /><br /> padding: 10px;<br /><br /> }<br /><br /> div:hover {<br /><br /> width: 120px;<br /><br /> height: 60px;<br /><br /> background: #1ec7e6;<br /><br /> font-size: 20px;<br /><br /> opacity: 1;<br /><br /> transform: rotate(360deg);<br /><br /> }<br /><br /> </style><br /><br /> <div>css3 transition</div>

以前我以为只有hover才能触发过渡效果。
后来逐渐搞明白只要样式发生变化，就能触发过渡。
关于这点儿，也许很多人都知道了。

当然了，写此文的目的是希望后来者尽快地知道这点。
下面我来举几个例子：
1.最常见的:hover来触发
html 代码

<style><br /><br /> div {<br /><br /> width: 100px;<br /><br /> height: 40px;<br /><br /> background: #92B901;<br /><br /> transition: width 0.5s;<br /><br /> }<br /><br /> div:hover{<br /><br /> width:200px;<br /><br /> }<br /><br /> </style><br /><br /> <div></div>

2.js添加操作来触发
比如添加样式
html 代码

<style><br /><br /> div {<br /><br /> width: 100px;<br /><br /> height: 40px;<br /><br /> background: #92B901;<br /><br /> transition: width 0.5s;<br /><br /> }<br /><br /> .change{<br /><br /> width:200px;<br /><br /> }<br /><br /> </style><br /><br /> <div></div><br /><br /> <script><br /><br /> setTimeout(function() {<br /><br /> var div = document.querySelector(‘div’);<br /><br /> div.classList.add(‘change’);<br /><br /> });<br /><br /> </script>

也比如直接修改style属性来触发：
html 代码

<style><br /><br /> div {<br /><br /> width: 100px;<br /><br /> height: 40px;<br /><br /> background: #92B901;<br /><br /> transition: width 0.5s;<br /><br /> }<br /><br /> </style><br /><br /> <div></div><br /><br /> <script><br /><br /> setTimeout(function() {<br /><br /> var div = document.querySelector(‘div’);<br /><br /> div.style.width = ‘200px’;<br /><br /> });<br /><br /> </script>

3.其他
通过js来触发，感觉少了很多乐趣。
其实还有很多种触发方式，只要改变过渡的“过渡属性”这个样式，即可。
比如各种伪类触发：
html 代码

<style><br /><br /> div {<br /><br /> width: 100px;<br /><br /> height: 40px;<br /><br /> background: #92B901;<br /><br /> transition: width 0.5s;<br /><br /> }<br /><br /> input:focus ~ div{<br /><br /> width: 200px;<br /><br /> }<br /><br /> </style><br /><br /> <input><br /><br /> <div></div>

当然了利用input获取焦点，你可以把一些相应提升信息弹出来：
html 代码

<style><br /><br /> input:focus ~ p{<br /><br /> width: 200px;<br /><br /> transform:scale(1);<br /><br /> }<br /><br /> p{<br /><br /> transform:scale(0);<br /><br /> transition: transform 0.2s;<br /><br /> }<br /><br /> </style><br /><br /> <input><br /><br /> <p>please input numbers</p>

有比如:active来触发
html 代码

<style><br /><br /> button:active ~ p{<br /><br /> width: 200px;<br /><br /> transform:scale(1);<br /><br /> }<br /><br /> p{<br /><br /> transform:scale(0);<br /><br /> transition: transform 0.2s;<br /><br /> }<br /><br /> </style><br /><br /> <button>hold me</button><br /><br /> <p>hahah</p>

上面的按钮需要按住才行。
当然也有其他的方式，我这里举个常见的例子：
html 代码

<style><br /><br /> input{<br /><br /> display:none;<br /><br /> }<br /><br /> label{<br /><br /> width:100px;<br /><br /> height:50px;<br /><br /> background:blue;<br /><br /> display:block;<br /><br /> border-radius:25px;<br /><br /> }<br /><br /> div{<br /><br /> width:50px;<br /><br /> height:50px;<br /><br /> border-radius:50%;<br /><br /> background:white;<br /><br /> border:1px solid silver;<br /><br /> position: relative;<br /><br /> left:0;<br /><br /> transition: left 0.5s;<br /><br /> }<br /><br /> input:checked ~ div{<br /><br /> left:50px;<br /><br /> }<br /><br /> </style><br /><br /> <label><br /><br /> <input type=”checkbox”><br /><br /> <div></div><br /><br /> </label>

如果上面要模拟开关，需要把主要的样式都放在input的兄弟元素上。网上很多的，这里不过多解释了。

总结一下，本文强调一个事情，transition的触发时机问题。只跟transition-name的值的值，比如是width的值是否发生变化有关。

本文完。

前端开发入门效果分享|前端开发者

https://www.rokub.com