04-Vue中的动画
2024-09-07 20:56:15
Vue中的动画
为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能;
-使用过渡类名
1.html
<div id="app">
<input type="button" value="动起来" @click="myAnimate">
<!-- 使用 transition 将需要过渡的元素包裹起来 -->
<transition name="fade">
<div v-show="isshow">动画哦</div>
</transition>
</div>
2.VM实例
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
isshow: false
},
methods: {
myAnimate() {
this.isshow = !this.isshow;
}
}
});
3.定义两组动画
/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
} /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.fade-enter,
.fade-leave-to {
opacity:;
transform: translateX(100px);
}
-使用第三方 CSS 动画库
1.导入动画类库
<link rel="stylesheet" type="text/css" href="./lib/animate.css">
2.定义transition属性
<transition
enter-active-class="fadeInRight"
leave-active-class="fadeOutRight"
:duration="{ enter: 500, leave: 800 }">
<div class="animated" v-show="isshow">动画哦</div>
</transition>
-使用动画钩子函数
1.定义 transition 组件以及三个钩子函数:
<div id="app">
<input type="button" value="切换动画" @click="isshow = !isshow">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div v-if="isshow" class="show">OK</div>
</transition>
</div>
2.定义三个 methods 钩子方法:
methods: {
beforeEnter(el) { // 动画进入之前的回调
el.style.transform = 'translateX(500px)';
},
enter(el, done) { // 动画进入完成时候的回调
el.offsetWidth;
el.style.transform = 'translateX(0px)';
done();
},
afterEnter(el) { // 动画进入完成之后的回调
this.isshow = !this.isshow;
}
}
3.定义动画过渡时长和样式:
.show{
transition: all 0.4s ease;
}
--v-for 的列表过渡
- 定义过渡样式
<style>
.list-enter,
.list-leave-to {
opacity:;
transform: translateY(10px);
} .list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}
</style>
- 定义DOM结构,其中,需要使用 transition-group 组件把v-for循环的列表包裹起来:
<div id="app">
<input type="text" v-model="txt" @keyup.enter="add"> <transition-group tag="ul" name="list">
<li v-for="(item, i) in list" :key="i">{{item}}</li>
</transition-group>
</div>
- 定义 VM中的结构:
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
txt: '',
list: [1, 2, 3, 4]
},
methods: {
add() {
this.list.push(this.txt);
this.txt = '';
}
}
});
--列表的排序过渡
<transition-group>
组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的 v-move
特性,它会在元素的改变定位的过程中应用。
v-move
和v-leave-active
结合使用,能够让列表的过渡更加平缓柔和:
.v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}
最新文章
- AngularJS_01之基础概述、设计原则及MVC设计模式
- Python matplotlib笔记
- Ubuntu如何选择更新源
- java内置数据类型
- multipath tcp experiment
- nanoTime对volatile 测试的一种写法
- 小波说雨燕 第三季 构建 swift UI 之 UI组件集-视图集(四)Alert View视图 学习笔记
- oracle 自定义 聚合函数
- python处理url中的中文编码,以及其他编码问题
- NSS_11 Server Error in &#39;/&#39; Application
- Android List<;Map<;String,String>;转json(例子)
- Integer Intervals(贪心)
- RabbitMq install on Centos6.3
- sqlserver日志文件过大的处理方法
- Mego开发文档 - 快速开始
- 利用nginx,腾讯云免费证书制作https
- 基于C语言的磁引导园丁机器人源程序 --单片机应用
- Centos7下搭建SVN服务,本地提交代码自动同步到WEB目录
- 13.3SolrCloud集群使用手册之Zookeeper指令
- (原创)c++11改进我们的模式之改进单例模式