关于怎么触发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 {
width: 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的过程!