Vue教程(动画-半场动画)
时间:2022-06-26
本文章向大家介绍Vue教程(动画-半场动画),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
上篇文章我们介绍了过渡动画的实现,包括完整的 入场 和 离场 动画,但是在实际过程中我们有时可能仅仅需要使用半场动画,比如淘宝购物车的下单处理等。
Vue 半场动画
1.基础页面
基础页面设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
2.样式设置
添加一个圆球图标,来控制该ball的半场动画
添加样式
效果
通过按钮显示控制 ball的显示和隐藏
效果
3.JavaScript钩子设定
ball要添加动画的话需要被transition包裹
钩子函数 |
说明 |
---|---|
v-on:before-enter=“beforeEnter” |
入场动画之前执行beforeEnter方法 |
v-on:enter=“enter” |
入场过程中执行的方法 |
v-on:after-enter=“afterEnter” |
入场后执行的方法 |
v-on:enter-cancelled=“enterCancelled” |
入场动画取消的时候执行方法 |
v-on:before-leave=“beforeLeave” |
离场动画之前执行beforeLeave方法 |
v-on:leave=“leave” |
离场动画过程中执行的方法 |
v-on:after-leave=“afterLeave” |
离场结束后执行的方法 |
v-on:leave-cancelled=“leaveCancelled” |
离场动画取消时执行的方法 |
添加钩子方法
4.效果处理
4.1 添加基本设定
设置ball的初始位置及入场后的位置。
我们发现虽然ball动了,但是效果没有出来,继续往下看
4.2 offsetWidth设定
在 enter 方法中添加 offsetWidth 属性
效果出来了,然后我们让入场完的ball 消失
效果
4.3 done
上面的效果虽然实现了最终隐藏ball,但是间隔了1描述,这时我们可以显示的 enter中执行 done方法
效果
效果不是太明显,工具原因,大家可以执行运行下。
官方说明
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 3分钟短文:素未谋面,Laravel数据库模型初阶入门
- 在tinycolinux上编译seafile
- Alink漫谈(二十一) :回归评估之源码分析
- Linux环境下通过GDB调试C项目实战
- Alink漫谈(二十二) :源码分析之聚类评估
- Python3.x将代码打包成exe程序并添加图标
- 在tinycolinux上编译pypy和hippyvm
- IDEA 热部署配置 HotSwapAgent-IntelliJ-IDEA-plugin
- 在tinycolinux上编译odoo8
- 在tinycolinux上编译jupyter和rootcling组建混合cpp,python学习环境
- 110分钟使用Python搭建自己的IP定位查询接口
- python实现在线微博数据可视化
- 在tinycolinux上安装chrome
- 如何在Ubuntu 18.04服务器上安装Python 3和设置编程环境
- python趣味题-数字加密