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

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

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

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

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

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

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

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

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

有比如:active来触发
html 代码

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

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

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

本文完。

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

https://www.rokub.com

» 本文来自:前端开发者 » 《前端开发入门效果分享_过渡效果触发时机的问题》
» 本文链接地址:https://www.rokub.com/2816.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!