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); 

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

这篇关于css3 - transition用js改变class不能实现过渡效果吗？怎样才能实现呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！