关于CSS3属性transition的触发

关于怎么触发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的过程！