一、概念

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

二、默认过渡

<template><div><button @click="isShow=!isShow">显示/隐藏</button><transition  appear><h1 v-show="isShow" class="come">测试</h1></transition></div></template><script>export default { name:"demo2",data(){return{isShow:true}}}</script><style scoped>h1{background-color: rgb(238, 117, 48);width: 500px;}.v-enter,.demo2-leave-to {transform: translateX(-500px);}.v-enter-active,.demo2-leave-active{transition: 1s linear;;}.v-enter-to,.demo2-leave{transform:translateX(0);}</style>

v-enter是初始位置
v-enter-to是结束位置
v-enter-active是激活状态，是v-enter和v-enter-to之间的
appear是初始就运行enter的动画
需要动画的单标签需要被标签包住

三、transtion-group

<template><div><button @click="isShow=!isShow">显示/隐藏</button><transition-group  name="demo" appear><h1 v-show="!isShow" key="1" class="come">测试</h1> <!--多个标签要用transition-group ，这个标签里的标签一定要key--><h1 v-show="isShow"  key="2" class="come">测试</h1></transition-group></div>
</template><script>
export default {name:"demo",data(){return{isShow:true}}
}
</script><style scoped>h1{background-color: rgb(238, 117, 48);width: 500px;}.demo-enter-active{animation: demo 1s linear;}.demo-leave-active{animation: demo 1s linear reverse;}@keyframes demo{from{transform: translateX(-500px);}to{transform: translateX(0);}}
</style>

transtion-group可以包裹多个标签，在标签里写name时候，在写对应的vue过渡动画时需要将v换成name的值

四、vue过渡动画的库

库地址
安装
$ npm install animate.css --save
引入样式
import 'animate.css';
这里的enter-active-class相当于写在style的v-active-class，
库的name是animate__animated animate__bounce

<template><div><button @click="isShow=!isShow">显示/隐藏</button><transition  enter-active-class="animate__zoomInDown" name="animate__animated animate__bounce" appear leave-active-class="animate__backOutUp"  ><h1 v-show="isShow" key="1" class="come">测试</h1> <!--多个标签要用transition-group ，这个标签里的标签一定要key--></transition></div></template><script>import "animate.css"export default {name:"demo3",data(){return{isShow:true}}}</script><style scoped>h1{background-color: rgb(238, 117, 48);width: 500px;}</style>

这里的是效果选项

五、ui库

elementui 官网中文
想这种可收起的日历，自己有点麻烦，直接引用别人的

安装
npm i element-ui -S
完整引入（简单，内存有点大）
main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

组件要用到的

<div class="block"><span class="demonstration">默认</span><el-date-pickerv-model="value1"type="date"placeholder="选择日期"></el-date-picker>

直接就生成了
按需引入
更改babel.config.js文件

 "plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]

import 'element-ui/lib/theme-chalk/index.css'
import { dialog } from 'element-ui'
Vue.use(dialog)

还是main.js里

vue的过渡动画（有vue的动画库和ui库的介绍）相关推荐

vue中过渡动画（类名实现方式）
vue中过渡动画分为两类,一类是进场动画,一类是出场动画要实现上面的进场动画,主要有三种方式:类名,css动画库,js函数类名本质就是动态添加类名实现动画在进入/离开的过渡中,会有 6 个 c ...
动画延迟以及Animista动画库
怎么设置animate的动画延迟在里面加入animate_delay-1s即可这里的1s根据自己的需求进行改变推荐一个动画库Animista 这个库的地址是: Animista - CSS An ...
php magic模版插件,magic-带64种动画效果的CSS3动画库
magic.css是一款带64种动画效果的CSS3动画库.magic.css中的动画分为12大类,全部使用CSS3 animation动画来完成.各种效果使用非常简单,只需要为元素添加和移除相应的cl ...
【Vue】Vue的过渡动画
目录一.过渡动画二.transition组件三.transition的显示的CSS类名四.transition的隐藏的CSS类名五.互斥动画示例: 六.设置动画过程中的监听回调七.列表过 ...
Vue实现集成使用第三方Animate.css动画库详细教程（解决鼠标移入移出闪烁问题）
vue通过第三方集成Animate.css简单快速的实现动画,通过类名引用,可以轻松实现Animate的所有动画,Animate.css是一款强大的预设css3动画库,Animate.css内置了很多 ...
react-native系列(13)动画篇：Animated动画库和LayoutAnimation布局动画详解
动画概念了解流畅.有意义的动画对于APP户体验来说是非常重要的,用RN开发实现动画有三种方法: requestAnimationFrame:称为帧动画,原理是通过同步浏览器的刷新频率不断重新渲染界面 ...
android动画帧率_Android动画进阶—使用开源动画库nineoldandroids
前言 Android系统支持原生动画,这为应用开发者开发绚丽的界面提供了极大的方便,有时候动画是很必要的,当你想做一个滑动的特效的时候,如果苦思冥想都搞不定,那么你可以考虑下动画,说不定动画轻易就搞定 ...
html中如何设置动画鼠标,使用animate动画库添加鼠标经过动画
使用animate动画库添加鼠标经过动画蓝叶网站设计 2016-11-27 11679 4评论 animate是一个css3动画库,使用它简单几步就能很轻松的为网站增加各种 ...
【猿说VUE】Vue效果法宝，过渡动画
基础:过渡动画 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Anim ...

vue的过渡动画（有vue的动画库和ui库的介绍）