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

【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/[email protected]"></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是代替我们在transitionname属性

例如

<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.cssvivify.css

animate.css

image-20220105114705171

vivify.css

image-20220105215319928

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

通过自定义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 过渡的时候,enterleave 中必须使用 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()
},

小结

Vue的v-if和v-show也还是有许多可玩性的,transition这个组件看看我们代码中有好好的使用到了吗?能否给业务带来帮助呢?

感谢

万能的网络

菜鸟教程

以及勤劳的自己,个人博客GitHub学习GitHub

公众号【归子莫】,小程序【小归博客】

如果你感觉对你有帮助的话,不妨给我点赞👍吧,持续关注也行哈!

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>