css过渡

 

               
      
       回复
      
     

/* 可以设置不同的进入和离开动画 *//* 设置持续时间和动画函数 */.slide-enter-active,.slide-leave-active{    transition: all 1s ease;}.slide-enter, .slide-leave-to {    transform: translateY(100%);    opacity: 0;}.slide-enter-to, .slide-leave {    transform: translateY(0);    opacity: 1;}

xx-enter-active,xx-leave-active 是进入和离开的整个过程 设置过渡时间即可

xx-enter,xx-leave-to 是 进入前 和离开后的状态（对于简单的过渡，从下面滑入滑出，进入前和和离开后 本身就是同一状态 所以可以写一个样式）

xx-enter-to,xx-leave 是 进入后和离开前的状态

 

js 钩子函数过渡

 

             
       // 某某过渡组件
     

// --------        // 进入中        // --------        beforeEnter: function (el) {            // ...            el.style.transform = 'translateY(100%)'            el.style.opacity = 0        },        // 当与 CSS 结合使用时        // 回调函数 done 是可选的        enter: function (el, done) {            // ...            el.offsetWidth            el.style.transform = 'translateY(0)'            el.style.opacity = 1            el.style.transition = 'all 1s ease'            done()        },        afterEnter: function (el) {            // ...            this.footerHeight = '350px'        },        enterCancelled: function (el) {            // ...        },        // --------        // 离开时        // --------        beforeLeave: function (el) {            // ...            console.log('beforeleave')            // el.style.transform = 'translateY(0)'            // el.style.opacity = 1        },        // 当与 CSS 结合使用时        // 回调函数 done 是可选的        leave: function (el, done) {            // ...            console.log('leave')            setTimeout(() => {                // el.offsetWidth                el.style.transform = 'translateY(100%)'                el.style.opacity = 0                el.style.transition = 'all 20s ease'                done()            })        },        afterLeave: function (el) {            // ...            this.footerHeight = '40px'        },        // leaveCancelled 只用于 v-show 中        leaveCancelled: function (el) {            // ...        }

重点：

el.offsetWidth  是用来重绘页面的 不加上这句话 没有过渡效果 也可以用setTimeout（（=>{}））