第六章 组件 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 ...
随机推荐
- 论文阅读 | Adversarial Example Generation with Syntactically Controlled Paraphrase Networks
[pdf] [code] 句法控制释义网络 SCPNS 生成对抗样本 我们提出了句法控制意译网络(SCPNs),并利用它们来生成对抗性的例子.给定一个句子和一个目标语法形式(例如,一个选区解析),s ...
- 暑假--升级攻击家庭wifi
参考: 1.http://blog.jobbole.com/64832/ 2.http://blog.jobbole.com/65851/ 3.http://blog.jobbole.com/6562 ...
- SGI STL源码stl_bvector.h分析
前言 上篇文章讲了 STL vector 泛化版本的实现,其采用普通指针作为迭代器,可以接受任何类型的元素.但如果用来存储 bool 类型的数据,可以实现功能,但每一个 bool 占一个字节(byte ...
- 基于freescale i.Mx6（ARM）的阿里云oss调试记录
交叉编译阿里OSS调试记录 1.1 开通oss服务 具体参考以下链接: https://help.aliyun.com/document_detail/31884.html?spm=a2c4g.111 ...
- spring-boot 几个工具类（七）
环境 jdk 6 tomcat 6.0.53 sts 4.4.2 maven 3.2.5 mysql 5.7 SpringContextHolder SpringContextHolder 可以很方便 ...
- PDO简单的DB类封装
<?php class DB{ private $dbs = ""; private $fields = "*"; private $tables = n ...
- 网站如何接入微信公众号JSAPI支付PHP版
1.首先,我们要有一个微信公众号(分类类型有订阅号,服务号,企业号)我们的微信公众号一定是个服务号只有它才有微信支付接口.. 并且这个微信公众号一定要进行微信认证才能申请微信支付接口. 2.申请JSA ...
- Redis迁移键
迁移键: move key db 用于在Redis内部进行数据迁移 dump key + restore key ttl value 可以实现在不同的Redis实例之间进行数据迁移 127.0.0.1 ...
- vue 动态添加对象属性
昨天使用vue发现直接给对象添加属性,并不能触发响应更新,后来看文档发现要通过this.$set 函数动态添加才可用,eg: this.$set( obj, key, data)
- nginx+keepalived高可用
准备工作: yum install -y gcc openssl-devel pcre-devel install iptables-services setenforce 0 sed -ri 's/ ...