过渡效果

最新推荐文章于 2025-12-16 15:52:05 发布

原创最新推荐文章于 2025-12-16 15:52:05 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue #css3 #java #html

本文详细介绍了Vue的Transition组件，包括条件渲染、动态组件和根节点过渡。讲解了CSS过渡和动画的实现，以及如何自定义过渡类名和设置过渡时长。同时提到了JavaScript钩子函数在过渡过程中的作用，展示了如何结合使用Vue过渡系统和第三方CSS动画库。

transition 是Vue 提供的封装组件。

条件渲染(使用v-if)、条件展示(使用 v-show)、动态组件、组件根节点

当插入或删除包含在transition 组件元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了CSS 过度或动画，如果是，在恰当的时机添加／删除CSS 类名。

2. 如果过度组件提供了JavaScript 钩子函数，这些钩子函数将恰当的时机被调用。

3. 如果没找到JavaScript 钩子并且也没有监测到CSS 过渡／动画，DOM 操作(插入／删除)在下一帧中立即执行。

过渡的-CSS-类名

<transition name="my-transition"> //可重置前缀

 1         /*     v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除；
 2             v-enter-active：定义过渡的状态。元素整个过渡过程中作用，在元素被插入时生效
 3             v-enter-to 定义进入过渡的结束状态
 4         */
 5         .test-enter,.test-enter-active,.test-enter-to{
 6             transition:opacity 1s; background: green
 7         }
 8         /*  v-leave：定义来开过渡的开始状态。
 9             v-leave-active：定义过渡的状态
10             v-leave-to 定义离开过渡的状态
11         */
12         .test-leave,.test-leave-active,.test-leave-to{
13             transition:opacity 2s; background: yellow
14         }

CSS 过渡

 1     .test-enter-active{
 2         transition: all 0.5s linear
 3     }
 4     
 5     .test-leave-active{
 6         transition: all 0.5s linear
 7     }
 8     .test-enter, .test-leave-to{
 9         transform: translateX(100px);
10         opacity: 0;
11     }

CSS 动画

 1     .test-enter-active{
 2         animation: test-in .5s;
 3     }
 4     .test-leave-active{
 5         animation: test-in .5s reverse
 6     }
 7     @keyframes test-in{
 8         0%{
 9             transform:scale(0);
10         }
11         50%{
12             transform: scale(1.5);
13         }
14         100%{
15             transform: scale(1)
16         }
17     }

自定义过渡类名

通过自定义过渡类名，优先级高于普通类名。对于Vue 的过渡系统和其他第三方CSS 动画库，如Animate.css 结合使用非常有用。

enter-class	enter-active-class	enter-to-class
leave-class	leave-active-class	leave-to-class

        <transition name="test" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">

显性的过渡效果持续时间

<transition name="test"  :duration="{enter:500,leave:800}">

JavaScript 钩子