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

Question

当监听到事件时，更改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);
            }
            }

Answer 1

你用display: none之後，他就會直接執行，然後被隱藏，你看不到過渡的效果。 。 。

你可以在trasition的回呼函數裡面使他display: none;

xxx.addEventListener('transitionend', function () {  

, false); 

在動畫結束後對他進行操作，也可連續動畫。