关于怎么触发transition的效果,前面有篇文章说过一次,《关于transition和animation》,而且在实际的项目生产中,也是一直这么使用的,因为明明知道直接添加class是无法触发transition效果的,那何必再做这些无用功呢?而且很确定的是,之前也做过各种测试的。
然而,事实真的这样吗?
今天突然想到是不是应该再看看transition这个属性。
其中的属性不做一一介绍,我自己也没有那么透彻的理解每一个属性值的每一小点,我们这里依然聚焦于怎么触发transition这个变形的效果。
<div class="btn-transiton"> <a href="javascript:;">触发transition-show</a> <a href="javascript:;">触发transition-hide</a> </div> <div class="transition"></div>
比较简单的html结构,看看css
.btn-transiton { line-height: 2; padding: 0.5rem; } .transition { 2rem; height: 2rem; background: #ccc; opacity: 1; transition: height 1s ease-in; }
刚开始的时候,肯定是通过js设置css属性,让其达到触发transition动画效果的目的。
var height = $(".transition").height(); $(".btn-transiton").on("click", "a:first-child", function () { $(".transition").css("height", 0); }).on("click", "a:last-child", function () { $(".transition").css("height", height); });
看到这样的代码,当然就会想到利用height()函数替代:
var height = $(".transition").height() $(".btn-transiton").on("click", "a:first-child", function () { $(".transition").height(0); }).on("click", "a:last-child", function () { $(".transition").height(height); });
当走到这一步的时候,如果不试验一下使用添加删除class触发这个transition效果,能死心吗?
为css添加:
.transition.active-height { height: 0; }
js改造:
var height = $(".transition").height() $(".btn-transiton").on("click", "a:first-child", function () { $(".transition").addClass("active-height"); }).on("click", "a:last-child", function () { $(".transition").removeClass("active-height"); });
此时,令人意想不到的事情发生了,添加删除class,居然也可以触发transition的动画效果了,究竟什么时候可以的?或者哪一版本浏览器开始支持这一特性的?并不仅仅是chrome浏览器支持,firefox,safari也都可以支持。
当前电脑上安装的chrome版本为:
firefox版本为:
Safari版本:
为了避免出现仅仅是height属性才有这种情况发生,使用opacity、transform属性,也能够触发相同效果,甚至同时触发width、height、all都能够实现。
这样就可以减少很多,不必要的js写css的过程!