css3 - transition用js改变class不能实现过渡效果吗？怎样才能实现呢？

问题描述

当监听到事件时，更改class,但是看不到过渡效果。transition用js改变class不能实现过渡效果吗，怎样才能实现呢？

.search-page { position: fixed; top: 88px; left: 0; width: 100%; height: 100%; z-index: 200; transition: all 0.4s linear; -webkit-transition: all 0.4s linear; &.unactive{display: none;opacity: 0; background-color: rgba(7,17,27,0); } &.search-active {display: block;opacity: 1;background-color: rgba(7,17,27,0.6); } }

问题解答

你用display: none之后，他就会直接执行，然后被隐藏，你看不到过渡的效果。。。

你可以在trasition的回调函数里面使他display: none;

xxx.addEventListener(’transitionend’, function () { , false);

在动画结束后对他进行操作，也可连续动画。