第六章 组件 61 动画-小球动画flag标识符的作用分析
<!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>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.ball{
width:15px;
height:15px;
background-color: red;
border-radius: 50%;
}
</style>
</head> <body>
<div id="app">
<input type="button" value="接入购物车" @click="flag=!flag"> <transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
flag:false
},
methods:{
beforeEnter(el){
el.style.transform='translate(0,0)'
},
enter(el,done){
el.offsetWidth
el.style.transform='translate(150px,450px)'
el.style.transition="all 1s ease"
done()
},
afterEnter(el){
//这句话，第一个功能，是控制小球的显示与隐藏
//第二个功能：直接跳过后半场动画，让flag标识符直接变为 false
//当第二次再点击 按钮的时候，flag false ->true
this.flag=!this.flag
// el.style.opacity=0.5 //Vue 把一个完整的动画，使用钩子函数，拆分为了两部分；
//我们使用 flag 标识符，来表示动画的切换；
//刚开始，flag= false ->true ->false
}
}
});
</script>
</body>
</html>
第六章 组件 61 动画-小球动画flag标识符的作用分析的更多相关文章
- KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器
无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...
- 第六章 组件 60 组件切换-应用切换动画和mode方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- KnockoutJS 3.X API 第六章 组件(4) 自定义元素
自定义元素提供了一种将组件注入视图的方便方法. 本节目录 介绍 例子 传递参数 父组件和子组件之间的通信 传递监控属性的表达式 将标记传递到组件中 控制自定义元素标记名称 注册自定义元素 备注1:将自 ...
- KnockoutJS 3.X API 第六章 组件(3) 组件绑定
组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...
- KnockoutJS 3.X API 第六章 组件(2) 组件注册
要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置. 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍 ...
- KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述
Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可 ...
- 第六章 组件 67 使用ref获取DOM元素和组件引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第六章 组件 59 组件切换-使用Vue提供的component元素实现组件切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- merge效率
测试merge效率 测试说明: MERGE是oracle提供的一种特殊的sql语法,非常适用于数据同步场景,即: (把A表数据插到B表,如果B表存在相同主键的记录则使用A表数据对B表进行更新) 数 ...
- pramfs理论
一.文件系统 1.百度百科: http://baike.baidu.com/link?url=WE3aLsszfbZZIPK-Vz8yPd799_RMqyfQZ4D-ETS5yd1nI8XzPK660 ...
- Spring+SpringMvc+Hibernate整合记录
Spring+SpringMvc+Hibernate+Maven整合各大配置文件记录 1.Idea新建的Maven架构 2.Maven的对象模型的内容 <project xmlns=" ...
- 【Python】【demo实验25】【练习实例】
原题: 有一分数序列:2/1,3/2,5/3,8/5,13/8,21/13...求出这个数列的前20项之和. 我的源码: #!/usr/bin/python # encoding=utf-8 # -* ...
- django进阶版3
hello... cookie与session 为什么会有cookie和session? 由于http协议是无状态的 无法记住用户是谁 cookie cookie是保存在客户端浏览器上的键值对 是服务 ...
- Gluster的搭建和使用
Gluster的搭建和使用 序言 我们为什么要去使用分布式存储,在一家大型公司或者大规模的集群中,大家可能会经常遇到一个问题,我的数据怎么存放,放在那,数据空间不够了怎么办,这些问题经常困扰着我们. ...
- 带她来看Frozen 2
- ubuntu下安装vue/cli提示No command 'vue' found
通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...
- Vue访问权限
设置权限 <script> export default { created(){ if(this.$store.state.userStore.role !== 'manager'){ ...
- 通过Callable接口实现多线程
一.通过Callable接口实现多线程 c.实现Callable重写call方法 实现Callable和实现Runnable类似,但是功能更强大,具体表现在 a.可以在任务结束后提供一个返回值,Run ...