【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>

效果

动画参数

注意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的动画库结合使用

<transitionname="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;
}

事件钩子

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

vue transition动画
引用: https://www.cnblogs.com/ccyinghua/p/7872694.html https://blog.csdn.net/wxw20147854/article/detai ...
vue transition淡入淡出效果
效果图代码 <template><div id="app"><button @click="show ...
vue transition之slide(fade)效果
使用vue transition标签来完成组件的过渡效果,本文模拟slide效果,也夹杂了淡隐淡出(fade)效果. 结合<component :is=''></component& ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
Vue基础复习(2)Vue2.X过渡、动画和自定义指令
vue2.X过渡&动画和自定义指令 1. 过渡效果 2. 动画效果 3. Vue内置指令 4. 自定义指令 vue2.X过渡&动画和自定义指令 transition(过渡) anima ...
事务的四大特性、事务处理开始与结束、v$transactio、 v$LOCK
数据库事务的四大特性:ACID 事务的4大特性(ACID): 原子性(Atomicity):事务是数据库的逻辑工作单位,它对数据库的修改要么全部执行,要么全部不执行.一致性(Consistemcy): ...
通过示例了解Vue过渡和动画
作者:Matt Maribojoc 译者:前端小智来源:stackabuse 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://githu ...
vscode 终端进入node_安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效
前言最近写TypeScript需要安装.配置Node.js环境,楼主是使用的安装包所以环境变量都是自动就配好了(如果是下载的zip压缩包解压后要自己配置到系统环境变量中).打开系统终端敲入命令 no ...
POJ2762 Going from u to v or from v to u? 强连通+缩点
题目链接: poj2762 题意: 给出一幅单向图.问这张图是否满足随意两点ab 都能从a到达b 或从b到达a 题解思路: 推断一幅图是否满足弱连通首先想到的是将图中的强连通分量(能互 ...

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

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

博客说明

说明

过渡动画

动画案例

动画参数

配合动画库

两个优秀的动画库

通过自定义class使用

通过动画直接使用

事件钩子

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

最新文章

热门文章

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

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

博客说明

说明

过渡动画

动画案例

动画参数

配合动画库

两个优秀的动画库

通过自定义class使用

通过动画直接使用

事件钩子 insertAdIfNeeded();

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

最新文章

热门文章

事件钩子