一、动画效果

1、过程：

①、首先使用transition标签包裹需要设置动画效果的标签；

②、使用@keyframes设置动画的效果，使用v-enter-active和v-leave-active设置动画的进场与退场；

2、注意：

①、transition标签与template标签类似，最后加载显示页面的时候会消失；

②、可以给transition标签设置name属性，通过name名-enter-active和name名-leave-active实现特定name名的特定样式；

③、可以给transition标签设置appear属性，实现初始化马上执行一次；

Test.vue

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- transition包裹着实现动画效果 --><!-- 如果给transition加了名字name='hello'，就不能使用v-enter-active，就必须使用hello-enter-active --><transition name="hello" appear><h1 v-show="isShow">你好啊！</h1></transition></div>
</template><script>
export default {name:"Test",data() {return {isShow:true}},
}
</script><style scoped>h1{background-color: orange;}.hello-enter-active{animation: atguigu 1s;}.hello-leave-active{animation: atguigu 1s reverse;}@keyframes atguigu {from{transform: translateX(-100%);}to{transform: translateX(0px);}}
</style>

App.vue

<template><div><Test /></div>
</template><script>import Test from './components/Test.vue'export default {name:'App',components:{Test},}
</script>

二、过渡效果

Test2.vue

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- transition包裹着实现动画效果 --><!-- 如果给transition加了名字name='hello'，就不能使用v-enter-active，就必须使用hello-enter-active --><transition name="hello" appear><h1 v-show="isShow">你好啊！</h1></transition></div>
</template><script>
export default {name:"Test",data() {return {isShow:true}},
}
</script><style scoped>h1{background-color: orange;}.hello-enter-active,.hello-leave-active{transition: 1s;}/* 进入的起点、离开的终点 */.hello-enter,.hello-leave-to{transform: translateX(-100%);}/* 进入的终点、离开的起点 */.hello-enter-to,.hello-leave{transform: translateX(0);}
</style>

App.vue

<template><div><Test /><test2 /></div>
</template><script>import Test from './components/Test.vue'import Test2 from './components/Test2.vue'export default {name:'App',components:{Test,Test2},}
</script>

三、多个元素过度

使用transition-group标签，需要使用key标签单独标志每一个元素；

<transition-group name="hello" appear><h1 v-show="!isShow" key="1">你好啊！</h1><h1 v-show="isShow" key="2">尚硅谷！</h1>
</transition-group>

四、第三方css库

Animate.css | A cross-browser library of CSS animations.

import 'animate.css'

<transition-group appearname="animate__animated animate__bounce" enter-active-class="animate__animated animate__bounce"leave-active-class="animate__backOutUp"><h1 v-show="isShow" key="1">你好啊！</h1><h1 v-show="isShow" key="2">尚硅谷！</h1></transition-group>

vue中的动画效果与过渡效果相关推荐

vue中实现动画效果--三种方式
一.普通动画实现效果用一个按钮, 控制一个 div 的淡入和淡出步骤使用 js 控制 div 的 class name 点击 function anime() {var boxDom = do ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
CSS 中使用动画效果实现点赞特效
CSS 中使用动画效果实现点赞特效效果图当没有点赞的时候, 页面上只有的图标是黑色的点赞之后, 出现一个缓缓上升的红心赞, 之后页面上的赞变为取消, 图标变为红色缓缓上升的红心赞会左右摇摆 - ...
【Vue实用功能】Vue中实现粒子效果 particles.js
Vue中实现粒子效果为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果下载particles.j ...
vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
Android中具有动画效果的图片资源
Android动画和Transition系列文章初识属性动画--使用Animator创建动画再谈属性动画--介绍以及自定义Interpolator插值器三谈属性动画--Keyframe以及Vie ...
怎么一次性删除PPT中所有动画效果?
怎么一次性删除PPT中所有动画效果? 通过PPT软件中的VBA来解决了,几乎搜遍了所有的网站,最后终于找到了答案,将代码给各位分享. 代码如下: Sub removeALL() Dim I As In ...
JQuery中的动画效果
show() hide() slideUp slideDown fadeIn fadeOut animate : 自定义动画 JQuery中的动画效果.html <!DOCTYPE html&g ...
【Android笔记25】Android中的动画效果之逐帧动画
这篇文章,主要介绍Android中的动画效果之逐帧动画. 目录一.逐帧动画 1.1.什么是逐帧动画 1.2.逐帧动画的使用 (1)创建drawable动画资源<

vue中的动画效果与过渡效果