搜尋

首頁  >  問答  >  主體

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);
            }
            }
天蓬老师天蓬老师2866 天前617

全部回覆(1)我來回復

  • 天蓬老师

    天蓬老师2017-04-17 11:56:16

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

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

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

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

    回覆
    0
  • 取消回覆