第六章 组件 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 ...
随机推荐
- ACM-ICPC 2017 Asia Urumqi A. Coins【期望dp】
题目链接:https://www.jisuanke.com/contest/2870?view=challenges 题目大意:给出n个都正面朝下的硬币,操作m次,每次都选取k枚硬币抛到空中,求操作m ...
- linux各种IPC机制
docker中的资源隔离,一种就是IPC的隔离.IPC是进程间通信. 下面的文章转载自https://blog.csdn.net/yyq_9623/article/details/78794775 原 ...
- （4.35）sql server清理过期文件【转】
在SQL Server中, 一般是用维护计划实现删除过期文件.不过直接用脚本也是可以的,而且更灵活. 下面介绍三种方法, 新建一个作业, 在作业的步骤里加上相关的脚本就可以了. --1. xp_del ...
- row_number()、rank()、dense_rank()排序方式的区别
1.row_number() 排序策略,连续排序,它会为查询出来的每一行记录生成一个序号,依次排序且不会重复,例如1,2,3,4 SELECT names,dept,row_number() OV ...
- kettle 创建作业发送邮件
1.创建作业 . 2. 发送邮件配置,测试邮件 发件地址可以使用的QQ.126.163等邮箱 smtp server的填写smtp.qq.com或者smtp.126.com等等都可以这里我用Q163邮 ...
- 作业5：Java编译原理
零.编译 1.编译器 (1)前端编译器:.java文件转变为.class文件Sun的javacEclipse JDT中的增量编译器(ECJ) (2)后端编译器:.class文件转变为机器码HotSpo ...
- 【原创】大数据基础之Kudu（6）kudu tserver内存占用统计分析
kudu tserver占用内存过高后会拒绝部分写请求,日志如下: 19/06/01 13:34:12 INFO AsyncKuduClient: Invalidating location 34b1 ...
- Linux服务器不关机新增硬盘的方法
在开机状态下,插入磁盘之后,执行如下命令: ls /sys/class/scsi_host/host0 host1 host2 echo "- - -" > /sys/cla ...
- Arduino Nano与SIM800C 通信
首先感谢 原文作者:https://blog.csdn.net/weixin_44481398/article/details/86596933#commentBox 找了好久没有找到,使用他的代码一 ...
- cube打包后css顺序错误
先说下解决办法: 把import {...} from cube-ui放在 import App from './App.vue'的前面 不然会产生如下错误 正确的顺序