【Vue】transition让你的v-if和v-show有个美美的过渡与动画

最新推荐文章于 2025-03-19 20:56:17 发布

归子莫

最新推荐文章于 2025-03-19 20:56:17 发布

阅读量1.9w

点赞数 20

分类专栏： Vue 文章标签：动画 vue.js css3

本文链接：https://blog.csdn.net/qq_45163122/article/details/122333766

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

【Vue】transition让你的v-if和v-show有个美美的过渡与动画

博客说明

文章所涉及的部分资料来自互联网整理，当然还有自己个人的总结和看法，分享的目的在于共建社区和巩固自己。引用的资料如有侵权，请联系本人删除！幸好我在，感谢你来！

说明

产品说：要你在这个这个显示的时候，那个不要显示，但是怎么突然就没了，这样用户会不会觉得这是个Bug？

Bug：？？？

其实这个是我们在vue中最平常使用的v-if和v-show指令。

生硬的业务场景切换，让产品感觉还可以优化的错觉

那么就再来优化一下！加个动画？

过渡动画

当然先看看官网的说法，地址

动画案例

主要是一个文字的渐变的过程动画。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue过渡动画</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>

.fade-enter-active, .fade-leave-active {
    transition: opacity 2s
}
.fade-enter-to, .fade-leave-to {
    opacity: 0
}
</style>
</head>
<body>
<div id="container">
	<button v-on:click="show = !show">点我</button>
	<transition name="fade" appear="true">
    <p v-show="show" v-bind:style="styleText">看我</p>
	</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#container',
    data: {
        show: true,
        styleText :{
            styleText: '30px',
            color: 'red'
        }
    },
    methods : {
    }
});
</script>
</body>
</html>

效果

2022-01-04 18.10.00

动画参数

注意v是代替我们在transition的name属性

例如

<transition name="plus">
   <div>hello</div>
</transition>

// css
.plus-enter {
	background: red;
}

参数列表

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

然后发现官方的文档里面写了有九个class

那么缺少的也发出来吧，以下这三个用的不多，有要使用的小伙伴可以试试哈！

v-appear：定义在初始渲染时的开始状态。
v-appear-active：定义初始渲染时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-appear-to: 定义初始渲染时的结束状态。

配合动画库

自己手写的动画效果难免费劲，不如别人写的动画库，那么能偷个懒吗？

能！

两个优秀的动画库

可以搭配动画库使用，推荐两个动画库animate.css与vivify.css

animate.css

vivify.css

以上就是两个动画库，大家有兴趣可以去看看

通过自定义class使用

animate.css的动画库结合使用

<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
>
    <p v-if="show">好看呀</p>
</transition>

通过动画直接使用

通过动画参数，在animation中使用动画效果。

<transition name="fade-box">
   <div v-show="show" class="box"></div>
</transition>

// css
.fade-box-leave-to {
 animation: bounceOutRight 0.8s;
}

事件钩子🪝

JavaScript钩子

before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

案例

<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
  >
    <p v-if="show">hello</p>
</transition>


// javascript
beforeEnter: function (el) {
  console.log(el)
},

enter: function (el, done) {
  console.log(el)
	done()
},