首页技术文章正文

什么是Vue过渡和动画？

更新时间:2021年09月09日16时11分来源:传智教育浏览次数:

Vue在插人、更新或者移除DOM时，提供了多种过渡效果。这里所说的过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。Vue提供了内置的过渡封装组件，即transition组件，语法格式如下。

<transition name="fade">
    <!-- 需要添加过度的div标签 -->
    <div></div>
</transition>

上述代码中，标签中用来放置需要添加过渡的div元素，使用name属性可以设置前缀，将name属性设为fade,那么“fade- ”就是在过渡中切换的类名前缀，如fade-enter、fade-leave等。如果标签上没有设置name属性名，那么“v-” 就是这些类名的默认前缀，如v-enter、 v-leave 等。推荐设置name值进行命名，这样在应用到另一个过渡时就不会产生冲突。

通过标签搭配CSS动画(如@keyframes)可以实现动画效果。动画相比过渡来说，可以在一个声明中设置多个状态，例如，可以在动画20%的位置设置一个关键帧，然后在动画50%的位置设置一个完全不同的状态。另外，标签还提供了一些钩子函数，可以结合JavaScript代码来完成动画效果，具体会在后面进行讲解。

好口碑IT培训