前言:前端框架千千万,独有vue占一半
我是风尚,让我们一起坐火箭去学习Vue
《风尚坐火箭学习vue》-- 第十二章:Vue中的动画transition
上章回顾:“好了,今天就讲这摸多”老头说道。。。
"好家伙,这可够我消化一段时间了"风尚叹气的说道。
“小伙子,我相信你啊。你练习会,我一会给你讲Vue的动画效果,有意思的很.”老头坚定的看着风尚。
“啊?”风尚有点,蒙圈了...
时间一点点过去,“来吧,风尚,开始整动画”老头说。风尚蒙圈了,硬着头皮听。
动画
Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。
语法
<transition name="过渡名称">
<div></div>
</transition> |
简单列子
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div> |
new Vue({
el: '#demo',
data: {
show: true
}
}) |
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
} |
过渡的类名
-
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
-
v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
-
v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
被移除),在过渡/动画完成之后移除。
-
v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
-
v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
-
v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave
被删除),在过渡/动画完成之后移除。
CSS 动画 html
<div id="app">
<button @click="flag=!flag">切换</button>
<div>
<transition name="fade">
<img src="img/sun.jpg" height="260" v-show="flag" alt="">
</transition>
</div>
</div> |
js
new Vue({
el:"#app",
data:{flag:true},
methods:{},
}) |
css
@keyframes fadeIn{
0%{ opacity: 0; transform:scale(0.7)}
90%{opacity: .8;transform:scale(1.2)}
100%{opacity: 1;transform:scale(1)}
}
@keyframes fadeOut{
from{ opacity: 1; transform:scale(1)}
to{opacity: 0;transform:scale(0.7)}
}
.fade-enter-active{
animation: fadeIn .7s ease;
}
.fade-leave-active{
animation: fadeOut .2s ease;
} |
自定义过渡的类名
他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css 结合使用十分有用。
html
<div id="app">
<button @click="flag=!flag">切换</button>
<div>
<transition enter-active-class="animated rotateIn" leave-active-class="animated bounceOutDown">
<img src="img/sun.jpg" height="260" v-show="flag" alt="">
</transition>
</div>
</div> |
js
new Vue({
el:"#app",
data:{flag:true},
}) |
导入其他css类库
<link rel="stylesheet" href="css/animate.min.css"> |
动画模式
同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了 过渡模式
<div id="app">
<transition name="fade" mode="out-in">
<button v-if="!flag" @click="flag=!flag" :key="'off'">off</button>
<button v-if="flag" @click="flag=!flag" :key="'on'">on</button>
</transition>
</div> |
new Vue({
el:"#app",
data:{flag:true}
}) |
@keyframes fadeIn{
0%{ opacity: 0;}
100%{opacity: 1;}
}
@keyframes fadeOut{
from{ opacity: 1;}
to{opacity: 0;}
}
.fade-enter-active{
animation: fadeIn .7s ease;
}
.fade-leave-active{
animation: fadeOut .2s ease;
} |
当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们
动画组
怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 组件
- 不同于
<transition>
,它会以一个真实元素呈现:默认为一个 <span>
。你也可以通过 tag
特性更换为其他元素。 - 过渡模式不可用,因为我们不再相互切换特有的元素。
- 内部元素 总是需要 提供唯一的
key
属性值。
<transition-group name="slide" tag="ul">
<li class="item p15" v-for="(item,index) in listing" :key="item">
</li></transition-group> |
/* 定义进 的关键帧动画*/
@keyframes slideIn{
from{ opacity: 0; transform: translateY(-80px);}
to{opacity: 1; transform: translateY(0px);}
}
/* 定义出 的关键帧动画*/
@keyframes slideOut{
from{ opacity: 1; transform: translateX(0);}
to{opacity: 0; transform: translateX(-100%);}
}
/*enter-active 进入时候添加class名称*/
.slide-enter-active{
animation: slideIn .5s ease;
}
/*离开的时候添加的class 名称*/
.slide-leave-active{
animation: slideOut .3s ease;
position: absolute;
}
/*正在移动元素 添加的class名称(vue 内置添加的)*/
.slide-move{
transition: all .3s ease;
} |
v-move 特性,它会在元素的改变定位的过程中应用
v-move 对于设置过渡的切换时机和过渡曲线非常有用
今天的Vue中的动画transition就讲到这里啊。