关键词：
认识动画
Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；
Vue的transition动画
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：
Transition组件的原理
1.自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名；
2.如果 transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；
3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行；
过渡动画class
我们会发现上面提到了很多个class，事实上Vue就是帮助我们在这些class之间来回切换完成的动画：
class添加的时机和命名规则
class的name命名规则如下：
- 如果我们使用的是一个没有name的transition，那么所有的class是以 v- 作为默认前缀；
- 如果我们添加了一个name属性，比如 ，那么所有的class会以 jack- 开头；
例子
<template>
<div>
<button @click="isShow = !isShow">显示隐藏</button>
<transition name="chao">
<p v-if="isShow">Hello Word</p>
</transition>
</div>
</template>
<script>
export default
name: "App",
components: ,
data()
return
isShow: true,
;
,
methods: ,
;
</script>
<style scoped>
.chao-enter-from,
.chao-leave-to
opacity: 0;
.chao-enter-to,
.chao-leave-from
opacity: 1;
.chao-enter-active,
.chao-leave-active
transition: opactiy 2s ease;
</style>
过渡css动画
Vue为了知道过渡的完成，内部是在监听 transitionend 或 animationend，到底使用哪一个取决于元素应用的
CSS规则：
如果我们只是使用了其中的一个，那么Vue能自动识别类型并设置监听；
但是如果我们同时使用了过渡和动画呢？
- 并且在这个情况下可能某一个动画执行结束时，另外一个动画还没有结束；
- 在这种情况下，我们可以设置 type 属性为 animation 或者 transition 来明确的告知Vue监听的类型；
<template>
<div>
<button @click="isShow = !isShow">显示隐藏</button>
<transition name="chao">
<p class="title" v-if="isShow">Hello Word</p>
</transition>
</div>
</template>
<script>
export default
name: "App",
components: ,
data()
return
isShow: true,
;
,
methods: ,
;
</script>
<style scoped>
.title
display: inline-block;
.chao-enter-active
animation: bounce 1s ease;
.chao-leave-active
animation: bounce 1s ease reverse;
@keyframes bounce
0%
transform: scale(0);
50%
transform: scale(1.2);
100%
transform: scale(1);
</style>
同时设置过渡和动画
Vue为了知道过渡的完成，内部是在监听 transitionend 或 animationend，到底使用哪一个取决于元素应用的CSS规则：
如果我们只是使用了其中的一个，那么Vue能自动识别类型并设置监听；
但是如果我们同时使用了过渡和动画呢？
- 并且在这个情况下可能某一个动画执行结束时，另外一个动画还没有结束；
- 在这种情况下，我们可以设置
type属性为animation或者transition来明确的告知Vue监听的类型；
显示的指定动画时间
过渡的模式mode
如果我们不希望同时执行进入和离开动画，那么我们需要设置transition的过渡模式：
动态组件的切换
<transition name="chao" mode="out-in">
<component :is="show ? 'home' : 'about'"></component>
</transition>
appear初次渲染
默认情况下，首次渲染的时候是没有动画的，如果我们希望给他添加上去动画，那么就可以增加另外一个属性appear：
<transition name="chao" mode="out-in" :appear="true">
<component :is="show ? 'home' : 'about'"></component>
</transition>
认识animate.css
Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目，对于强调、主页、滑动、注意力引导
非常有用；
自定义过渡class
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css. 结合使用十 分有用。
开始安装使用
npm install animate.css
在main.js中导入animate.css：
import 'animate.css'
开始使用
<transition
enter-active-class="animate__animated animate__rotateInDownLeft"
leave-active-class="animate__animated animate__zoomOut"
>
<h2 class="title" v-if="isShow">第三方组件动画</h2>
</transition>
认识gsap库
某些情况下我们希望通过JavaScript来实现一些动画的效果，这个时候我们可以选择使用gsap库来完成。
- GSAP是The GreenSock Animation Platform（GreenSock动画平台）的缩写；
- 它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的；
这个库应该如何使用呢？
- 需要安装gsap库；
npm install gsap - 导入gsap库；
- 使用对应的api即可；
JavaScript钩子
在使用动画之前，我们先来看一下transition组件给我们提供的JavaScript钩子，这些钩子可以帮助我们监听动画执行到什么阶段了.
- 当我们使用JavaScript来执行过渡动画时，需要进行 done 回调，否则它们将会被同步调用，过渡会立即完成。
- 添加 :css=“false”，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。
gsap库的使用
<transition @enter="enter" @leave="leave">
<h2 class="title" v-if="isShow">第三方组件动画</h2>
</transition>
methods:
enter(el, done)
gsap.from(el,
scale: 0,
x: 200,
onComplete: done,
);
,
leave(el, done)
gsap.to(el,
scale: 0,
x: 200,
onComplete: done,
);
,
,
gsap实现数字变化
<template>
<div>
<input v-model="keyword" />
<transition-group
tag="ul"
name="why"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<li v-for="(item, index) in showNames" :key="item" :data-index="index">
item
</li>
</transition-group>
</div>
</template>
<script>
import gsap from "gsap";
export default
data()
return
names: ["abc", "cba", "nba", "why", "lilei", "hmm", "kobe", "james"],
keyword: "",
;
,
computed:
showNames()
return this.names.filter((item) => item.indexOf(this.keyword) !== -1);
,
,
methods:
beforeEnter(el)
el.style.opacity = 0;
el.style.height = 0;
,
enter(el, done)
gsap.to(el,
opacity: 1,
height: "1.5em",
delay: el.dataset.index * 0.1,
onComplete: done,
);
,
leave(el, done)
gsap.to(el,
opacity: 0,
height: 0,
delay: el.dataset.index * 0.1,
onComplete: done,
);
,
,
;
</script>
<style scoped>
.item
margin-right: 10px;
display: inline-block;
.why-enter-from,
.why-leave-to
opacity: 0;
transform: translateY(30px);
.why-enter-active,
.why-leave-active
transition: all 1s ease;
.why-leave-active
position: absolute;
.why-move
transition: transform 1s ease;
</style>
认识列表的过渡
如果希望渲染的是一个列表,我们要使用 组件来完成
使用 有如下的特点：
列表过渡的基本使用
<template>
<div>
<button @click="addNum">添加数字</button>
<button @click="removeNum">删除数字</button>
<button @click="shuffleNum">数字洗牌</button>
<hr />
<transition-group tag="p" name="lisi">
<span v-for="item in numbers" :key="item" class="item">
item
</span>
</transition-group>
</div>
</template>
<script>
import _ from "lodash";
export default
data()
return
numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
numCounter: 10,
;
,
methods:
addNum()
this.numbers.splice(this.randomIndex(), 0, this.numCounter++);
,
removeNum()
this.numbers.splice(this.randomIndex(), 1);
,
shuffleNum()
this.numbers = _.shuffle(this.numbers);
,
randomIndex()
return Math.floor(Math.random() * this.numbers.length);
,
,
;
</script>
<style scoped>
.item
margin-right: 10px;
display: inline-block;
.lisi-enter-from,
.lisi-leave-to
opacity: 0;
transform: translateY(30px);
.lisi-enter-active,
.lisi-leave-active
transition: all 1s ease;
.lisi-leave-active
position: absolute;
.lisi-move
transition: transform 1s ease;
</style>
列表过渡的移动动画
<template>
<div>
<input v-model="keyword" />
<transition-group
tag="ul"
name="why"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<li v-for="(item, index) in showNames" :key="item" :data-index="index">
item
</li>
</transition-group>
</div>
</template>
<script>
import gsap from "gsap";
export default
data()
return
names: ["abc", "cba", "nba", "why", "lilei", "hmm", "kobe", "james"],
keyword: "",
;
,
computed:
showNames()
return this.names.filter((item) => item.indexOf(this.keyword) !== -1);
,
,
methods:
beforeEnter(el)
el.style.opacity = 0;
el.style.height = 0;
,
enter(el, done)
gsap.to(el,
opacity: 1,
height: "1.5em",
delay: el.dataset.index * 0.1,
onComplete: done,
);
,
leave(el, done)
gsap.to(el,
opacity: 0,
height: 0,
delay: el.dataset.index * 0.1,
onComplete: done,
);
,
,
;
</script>
<style scoped>
.item
margin-right: 10px;
display: inline-block;
.why-enter-from,
.why-leave-to
opacity: 0;
transform: translateY(30px);
.why-enter-active,
.why-leave-active
transition: all 1s ease;
.why-leave-active
position: absolute;
.why-move
transition: transform 1s ease;
</style>
vue-06-过度和动画(代码片段)
1,css过度与动画需要使用v-if,v-show来进行1),过度类名v-enter:进入时触发v-enter-active:执行过程中v-enter-to:停止时进行v-leave:离开时开始时进行的v-leave:active:离开执行时v-leave-to:离开停止时<div><p>动画过度</p><br/><button... 查看详情
vue3解决各场景loading过度，避免白屏尴尬！(代码片段)
...#xff1b;为了不白屏，提高用户体验，添加一个loading过度动画是非常常见的；那么这几种场景我们应该把loading加在哪里呢？文章目录Ⅰ、前言Ⅱ、vue3常见过度1、首次打开页面时loading2、路由切换时、异步组件loading... 查看详情
过度与动画(代码片段)
一、过度从一个状态，以动画方式变成另一个状态的变化过程1.过度属性1.transition-duration持续时间2.transition-delay延迟时间3.transition-property属性表示可过度的样式属性(多个值，用逗号连接)transition-property：all4.transition-timing-function：... 查看详情
vue2.0过度动画(代码片段)
vue在插入、更新或移除dom时，提供了多种不同方式的应用过度效果。包括以下工具： 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库，如animate.css 在过渡钩子函数中使用javascript直接操作DOM 可以配合... 查看详情
42vue3过渡和动画属性控制过渡时长(代码片段)
[动画]vue3过渡和动画并用小技巧构建一个过渡和动画并用的代码过渡和动画时长不一致的处理属性控制动画和过渡时长构建一个过渡和动画并用的代码<htmllang="en"><head><metacharset="UTF-8"><metaname=&... 查看详情
43js+vue3制作动画和钩子函数(代码片段)
[动画]JS+Vue3制作动画和钩子函数阐述指定不使用CSS动画使用JS编写动画效果before-enter钩子函数enter钩子函数after-enter钩子函数阐述有时候我们不使用CSS制作动画，而使用JS来制作动画。虽然CSS的动画比JS的效率要高，但JS... 查看详情
过度与动画(代码片段)
过渡与动画一、过渡1、过渡属性①transition-property属性表示可过渡的样式属性transition-property:all|[css1[...]];②transition-duration属性表示过渡持续时间transition-duration:<time>;③transition-delay属性表示过渡延迟时间transition-delay:<time&g 查看详情
vue3实践---路由router
...添加2个文件index.js,routes.js.这里就要画重点了。因为vue3的过度动画transition组件跟vue2比变化还是比较大的。主要是以下的2各方面：1.transition组件在vue2中是作为父级包裹路由router-view的，到了vue3就反过来了2.动画类名发生了一点变... 查看详情
vue动画(代码片段)
Vue动画使用过度类名实现动画将要使用过度动画的标签用transition包裹定义两组样式<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metaname="viewport"content="width 查看详情
vue3之transition&&各种动画实现，一文让你会动画(代码片段)
在开发中，如果没有动画的话，整个页面内容的显示和隐藏会非常的生硬！不好看，为了给予一定的用户体验，进入今天的主题目录一、Transition组件1.Transition组件的原理进入 离开2、Transition组件中使用transitio... 查看详情
vue2中文文档：进入离开和列表过度(代码片段)
进入、离开和列表的过渡概述当从DOM中插入、更新或移除项目时，Vue提供多种应用过渡效果的方式。包括以下工具：在CSS过渡和动画中自动处理class可以配合使用第三方CSS动画库，如Animate.css在过渡钩子函数中使用JavaScript直接操... 查看详情
vue封装的过度与动画(代码片段)
作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。写法：准备好样式：元素进入的样式：v-enter：进入的起点v-enter-active：进入过程中v-enter-to：进入的终点元素离开的样式... 查看详情
40vue3制作动画过渡效果(代码片段)
[动画]用Vue3制作过渡效果阐述准备基础文件增加过渡效果总结阐述有了39节内容的学习，本节我们在它的基础上用Vue的内置组件，制作过渡效果。需求很简单，还是DOM元素的显示和隐藏，但不在是滑入效果，而... 查看详情
vue的过渡动画(代码片段)
...ter-active在元素被插入时生效,动画结束后移除,定义了动画过度的状态,时间和运动曲线同样的leave和leave-active,只不过是动画结束时的定义隐藏的boss还有一个.slider-enter-to(leave也有相同的),是在元素被插入后一帧生效,同时slider-enter将... 查看详情
vue3学习随便记12(代码片段)
过渡与动画Vue提供了一些抽象概念，可以帮助处理过渡和动画：组件进入DOM和离开DOM的钩子，在CSS和JS均可用，使用内置组件<transition>过渡模式，在过渡期间编排顺序处理多个元素就地更新的钩子，使... 查看详情
vue3学习随便记12(代码片段)
过渡与动画Vue提供了一些抽象概念，可以帮助处理过渡和动画：组件进入DOM和离开DOM的钩子，在CSS和JS均可用，使用内置组件<transition>过渡模式，在过渡期间编排顺序处理多个元素就地更新的钩子，使... 查看详情
vue3之动画的实现(代码片段)
...有些生硬，因为用户体验不是很好，这时就需要动画的润色了，添加一个好的转场动画能让用户使用起来拥有更好的体验，并且动画还可以让一些耗时的任务看起来不那么“耗时”，比如当用户下载一个文件... 查看详情
react组件进入和退出动画实现(代码片段)
实现了React中组件的进入和退出动画效果，主要是通过props给组件传参来决定进入和退出，然后根据props选择不同的animationclass，并将组件停留在动画的结束阶段。在实现一个React中的弹框组件时，想给组件加个进入和退出动画，... 查看详情