前端开发入门效果分享|前端开发者
过渡效果想必很多同学都熟悉了,比如:
html 代码
以前我以为只有hover才能触发过渡效果。
后来逐渐搞明白只要样式发生变化,就能触发过渡。
关于这点儿,也许很多人都知道了。
当然了,写此文的目的是希望后来者尽快地知道这点。
下面我来举几个例子:
1.最常见的:hover来触发
html 代码
也比如直接修改style属性来触发:
html 代码
3.其他
通过js来触发,感觉少了很多乐趣。
其实还有很多种触发方式,只要改变过渡的“过渡属性”这个样式,即可。
比如各种伪类触发:
html 代码
当然了利用input获取焦点,你可以把一些相应提升信息弹出来:
html 代码
有比如:active来触发
html 代码
上面的按钮需要按住才行。
当然也有其他的方式,我这里举个常见的例子:
html 代码
如果上面要模拟开关,需要把主要的样式都放在input的兄弟元素上。网上很多的,这里不过多解释了。
总结一下,本文强调一个事情,transition的触发时机问题。只跟transition-name的值的值,比如是width的值是否发生变化有关。
本文完。
前端开发入门效果分享|前端开发者
» 本文来自:前端开发者 » 《前端开发入门效果分享_过渡效果触发时机的问题》
» 本文链接地址:https://www.rokub.com/2816.html
» 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册