vue有时需要让某些元素显示,可以使用v-if和v-show,但表达形式太过生硬,某些东西需要动画来实现,vue对过渡效果和动画效果做了封装
transition
在vue中元素的出现叫进入
在vue中元素的消失叫离开
当需要产生过渡效果的元素被包裹时会依次的应用6个样式类
进入状态三个类名
- v-enter:元素在被插入之前执行,当元素被插入后被移除,定义了过渡的开始状态(很快)
- v-enter-active:在整个插入元素过渡状态应用,在插入之前生效在过渡完成之后失效,定义了整个插入元素的过渡状态
- v-enter-to:在元素被插入之后生效,当元素插入过渡动画完成之后移除,定义了插入过渡动画的完成状态
离开状态三个类名
- v-leave:在元素被抽出时触发,下一帧移除,定义了元素抽出的开始状态(很快)
- v-leave-active:在整个抽出元素过渡状态应用,在元素在元素抽出之前生效在抽出完成之后失效,定义了整个抽出元素的过渡状态
- v-leate-to:在元素被抽出之后生效,当元素抽出过渡动画完成之后移除,定义了抽出过渡动画的完成状态
这张图清楚的解释了进入和离开的状态,
也可以知道v-enter-active和v-leave-active
描述整个进入和离开的状态,其中重要的是v-enter和v-leave和v-enter-active和v-leave-active这几个阶段比较重要
当一个页面只有一处用到过渡或者动画不用为transtion定义name属性,css中要调用进入和离开时的类名时默认会以v开头
例
<transtio>
<div class='box'></div>
</transtion>
.v-enter{
opacity:0;
}
.v-enter-active{
transition: opacity 1s;
}
生产中一个页面肯定不止有一个过渡或动画,所以就用到了下面的知识点为transtion定义不同的name属性来区别不同的动画和过渡,那么下面调用的方法就是将v替换为你为动画或过渡定义的name属性的值
例
<transtion name='fade'>
<div class='box'></div>
</transtion>
这里看到为动画定义了一个name属性,属性名是fade
那么下面要在css中调用为它定义动画这么调用
.fade-enter{
opacity:0;
}
.fade-enter-active{
transition: opacity 1s
}
这是一个小案例
<template>
<div>
<!-- 当点击按钮对v-