这里将通过四个实践小案例来体验和学习css过渡,css动画,javascript钩子,列表过渡的应用。至于案例用到的知识点就请自行学习官网文档。
<强> 1. css过渡——实践
先来看看演示效果:
这个案例其实很简单,通过一个过渡来触发多个子元素的过渡效果,我们只需要定义元素对应的过渡效果就可以,其他事情vue会帮我们搞的定,由此可以扩展出其他酷炫的过渡场景效果。先来看看这个简单案例的代码实现:
& lt; template>
& lt; div类=在“应用程序”;
& lt;按钮@click=皊howMenu”class=癰tn”在{{文本}}& lt;/button>
& lt;过渡的名字=耙贫北?
& lt; div类="菜单" v-show=靶恪北?
& lt; div类=澳谠趇nner-1”在1 & lt;/div>
& lt; div类="内在inner-2 "祝辞2 & lt;/div>
& lt; div类="内在inner-3 "在3 & lt;/div>
& lt;/div>
& lt;/transition>
& lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
出口默认{
数据(){
返回{
显示:假
};
},
方法:{
showMenu () {
这一点。展示=! this.show;
}
},
计算:{
text () {
返回。显示& # 63;“收”:“开”;
}
}
};
& lt;/script>
& lt;风格lang="笔" rel=把奖?笔”在
.app
.btn
位置:固定
底部:50 px
右:10 px
z - index: 10
宽度:50 px
高度:50 px
行高:50 px
border - radius: 50%
边界:没有
大纲:没有
颜色:# fff
字体大小:18 px
背景:蓝色
.menu
位置:固定
底部:50 px
右:10 px
宽度:50 px
高度:50 px
border - radius: 50%
过渡:1:8)在
,.move-enter-active
在
变换:translate3d (0, 0, 0)
transition-timing-function: cubic-bezier(0 .57无误,1.97)
.inner-1
transition-delay: 1。
.inner-2
transition-delay: 2
.inner-3
transition-delay: 3
和。move-enter及.move-leave-active
在
transition-timing-function: ease-in-out
.inner-1
变换:translate3d (60 px, 0, 0)
transition-delay: 3
.inner-2
变换:translate3d (40 px, 40 px, 0)
transition-delay: 2
.inner-3
变换:translate3d (60 px, 0, 0)
transition-delay: 1。
在
显示:inline-block
位置:绝对的
宽度:30 px
30 px高度:
行高:30 px
border - radius: 50%
背景:红色
text-align:中心
颜色:# fff
过渡:所有。4
.inner-1
前:-50像素
左:10 px
.inner-2
左:-30 px
前:-30像素
.inner-3
左:-50 px
上图:10 px
& lt;/style>
可以看到我们的代码基本主要是完成css过渡效果的样式,而触发过渡效果只是简单地通过一个点击事件就搞定了,vue会自动嗅探目标元素是否有css过渡或动画,并在合适时添加/删除css类名。那下一个演示就来简单实现一下使用css动画做过渡的效果。
<强> 2。css动画——实践
先来看看演示效果:
这个案例其实跟上面的演示差不多,不同之处在于过渡效果是使用css动画来实现,看下实现的代码:
& lt; template>
& lt; div类=在“应用程序”;
& lt;按钮@click=皊howball”class=癰tn”祝辞show
& lt;过渡name=耙贫崩嘈?岸北?
& lt; div类="球" v-show=靶恪北?
& lt; div类="内部"祝辞& lt;/div>
& lt;/div>
& lt;/transition>
& lt;/div>
& lt;/template>
& lt;脚本类型=拔谋?ecmascript-6”比;
出口默认{
数据(){
返回{
显示:假
};
},
方法:{
showball () {
这一点。展示=! this.show;
}
}
};
& lt;/script>
& lt;风格lang="笔" rel=把奖?笔”在
@keyframes形变{
0%、100% {
border - radius: 50%
背景:红色
}
50% {
border - radius: 0
背景:蓝色
}
}
@keyframes moveball-in {
0% {
变换:translate3d (300 px, -200 px, 0)
}
50% {
变换:translate3d (100 px, -400 px, 0)
}
100% {
变换:translate3d (0, 0, 0)
}
}
@keyframes moveball-out {
0% {
变换:translate3d (0, 0, 0)
}
50% {
变换:translate3d (100 px, -400 px, 0)
}
100% {
变换:translate3d (300 px, -200 px, 0)
}
}
.app
.btn
宽度:40像素
30 px高度:
margin-top: 40像素
边界:没有
大纲:没有
背景:红色
颜色:# fff
.ball
位置:绝对的
底部:20 px
左:20 px
宽度:50 px
高度:50 px
过渡:1 s cubic-bezier(22、-0.86 .97点,算下来)
,.move-enter-active
透明度:1
动画:moveball-in 1 s
在
动画:形变
,.move-leave-active
透明度:0.8
动画:moveball-out 1 s
在
动画:形变
在
显示:inline-block
宽度:30 px
30 px高度:
border - radius: 50%
背景:红色
过渡:1 s线性的
& lt;/style>
