Vue的transition动画
在下列情况下，可以给元素或者组件添加进入或离开的过渡：
- 条件渲染（v-if / v-show）
- 动态组件（
<conponent is="">） - 组件根节点
<template>
<transition>
<h2 v-if="isShow">hello world</h2>
</transition>
</template>
<style>
.v-enter-from, .v-leave-to {
opacity: 0;
}
.v-enter-to, .v-leave-from {
opacity: 1
}
.v-enter-active, .v-leave-active {
transition: all .3s
}
</style>transition组件的原理
- 自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，则在恰当的时机添加或删除CSS类名；
- 如果 transition 组件提供了 JavaScript 钩子函数，这些钩子函数在恰当的时机被调用；
- 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 插入、删除操作会立即执行。
过渡动画的class
v-enter-from: 定义进入过渡的开始状态
- 在元素被插入之前生效，在元素被插入以后下一帧移出
v-enter-active：定义进入过渡生效时的状态
- 在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移出
v-enter-to：定义进入过渡的结束状态
- 在元素插入之后进行下一帧生效（与此同时 v-enter-from 被移除），在过渡/动画完成之后被移除
- v-leave-from：定义离开过渡开始状态
- v-leave-active：定义离开过渡生效时的状态
- v-leave-to：离开过渡的结束状态
class的name命名规则
- 如果 transition 没有命名 name，那么 class 是以
v-作为默认前缀； - 如果添加了一个属性，比如
<transition name="ccc"，那么所有的 class 都要以ccc-开头。
Vue的animation动画
其原理同 transition，都是适当的添加或者删除class，这里就不在赘述，直接演示代码：
<template>
<transition name="ccc">
<h2 v-if="isShow">hello world</h2>
</transition>
</template>
<style>
.ccc-enter-active {
animation: scaleAnim .4s;
}
.ccc-leave-active {
/* 动画倒放 */
animation: scaleAnim .4s reverse;
}
@keyframes scaleAnim {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.25);
opcity: .5;
}
100% {
transiform: scale(1);
opacity: 1;
}
}
</style>动画的type和duration属性
- type属性用于两个动画时间不相同时以哪个动画结束时间为准
指定过渡的时间：可以设置两种类型的值：
- Number类型：同时设置进入和离开的过渡时间；
Object类型：分别设置进入和离开的过渡时间；
:duration="{ enter: 800, leave: 1000 }"- 单位是ms
过渡模式 mode
默认情况下，进入动画和离开动画是同时发生的，使用过渡模式 <transition mode="in-out"> 设置怎么执行动画，有两个选项，具体如下：
- in-out： 新元素先进行过渡，完成之后当前元素过渡离开；
- out-in：当前元素先进行过渡，完成之后新元素过渡进入。
初次渲染显示动画 /过渡
第一次渲染的时候默认没有动画的，使用 appear 属性可以设置第一次渲染使用动画/过渡。
<transition appear></transition>列表过渡
渲染列表时对列表的元素添加动画，使用 <transition-group> 组件来完成。
此组件的特点：
默认情况下，不会渲染成一个元素的包裹器，可以指定一个元素并以 tag attribute 进行渲染；
<transition-group tag="div"></transition-group> 会被渲染成一个 div 包裹容器- 过渡模式不可用，不再相互切换特有的元素；
元素内部需要提供唯一的 key attribute 值；
<transition-group> <li :key="item"></li> </transition-group>- CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
给其他元素添加过渡效果
新增一个 v-move 的类就可以在指定元素移动阶段让其他的元素也有相应的过渡
.v-move {
transition: all 2s;
}
/*
移除元素让被移除的元素设置为绝对定位
这样不会影响其他的元素进行过渡动画
*/
.v-leave-avtive {
position: absolute;
}
Comments | NOTHING