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

After you use display: none, it will be executed directly and then hidden. You will not see the transition effect. . .

You can make it display: none;

in the trasition callback function

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

, false); 

Operate him after the animation ends, or you can continue the animation.