Vue2.0的动画效果
2024-08-29 13:35:16
本文只是结合一些代码和图片加强对Vue动画的理解，更多资料请戳这里
结合原生CSS实现动画
下面是一张图片，简单清晰明了是吧^-^
下面是一段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.show-enter-active,.show-leave-active{
transition: all 0.4s ease;
padding-left: 10px;
}
.show-enter,.show-leave-active{
padding-left: 100px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="toggle">点击隐藏和显示</button>
<transition name="show">
<h3 v-show="isshow">{{message}}</h3>
</transition>
</div> <script>
new Vue({
el: '#app',
data: {
message:"hello Vue!",
isshow:false
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
}
}
})
</script>
</body>
</html>
结合animate.css实现动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css" />
<style>
.show{
transition: all 0.4s ease;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="toggle">点击隐藏和显示</button>
<transition enter-active-class="fadeInRight"
leave-active-class="fadeOutRight">
<div v-show="isshow" class="animated" class="show">{{message}}</div>
</transition>
</div> <script>
new Vue({
el: '#app',
data: {
message:"hello Vue!",
isshow:false
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
}
}
})
</script>
</body>
</html>
使用钩子函数实现动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.show{
transition: all 0.4s ease;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="toggle">点击隐藏和显示</button>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-show="isshow" class="show">{{message}}</div>
</transition>
</div> <script>
new Vue({
el: '#app',
data: {
message:"hello Vue!",
isshow:false
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
},
beforeEnter:function(el){
//定义当前实现动画的初始位置
el.style.transform = "translate(100px,0)";
},
enter:function(el,done){
//设置一下刷新状态
el.offsetWidth;
//设置动画的结束位置
el.style.transform = "translate(0px,0)";
//手动调用一下done方法，由这个方法去决定动画是否结束了
//否则动画的消失会有延迟
done();
},
afterEnter:function(el){
//将动画的状态复原设置
this.isshow = !this.isshow;
}
}
})
</script>
</body>
</html>
最新文章
- 基于hk2框架的功能测试Mock注入
- win7 hosts文件更改后无效，不生效问题
- Python之路----------random模块
- ecgcd(解二元不定方程)
- spring AspectJ的Execution表达式
- invert
- Web交互设计优化的简易check list
- 读《JavaScript语言精粹》的一些感言
- MEF 编程指南（八）：过滤目录
- QMessageBox 弹出框上的按钮设置为中文
- JDK 安装环境配置（ubuntu）
- d3力导向图聚焦
- Eclipse 安装 SVN 插件的两种方法
- day4-python基础-编码相关
- Openvswitch手册(9): Flow
- Js时间格式[转载]
- java 爬虫
- mouseover和mouseout事件的相关元素
- [javascript] 看知乎学习js事件触发过程
- python学习之老男孩python全栈第九期_day004知识点总结