作者：宅妈每日贴_889 | 来源：互联网 | 2023-05-26 08:21
关于怎么触发transition的效果，前面有篇文章说过一次，《关于transition和animation》，而且在实际的项目生产中，也是一直这么使用的，因为明明知道直接添加class是无法触发tr
关于怎么触发transition的效果，前面有篇文章说过一次，《关于transition和animation》，而且在实际的项目生产中，也是一直这么使用的，因为明明知道直接添加class是无法触发transition效果的，那何必再做这些无用功呢？而且很确定的是，之前也做过各种测试的。
然而，事实真的这样吗？
今天突然想到是不是应该再看看transition这个属性。
其中的属性不做一一介绍，我自己也没有那么透彻的理解每一个属性值的每一小点，我们这里依然聚焦于怎么触发transition这个变形的效果。
比较简单的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的过程！
京公网安备 11010802041100号