第六章 组件 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 ...
随机推荐
- 《JAVA语言》第三节课
使用递归方式判断某个字串是否是回文( palindrome ). 1. 设计思想 在判断字符串是否是回文的时,采用递归法,首先要分析出重复做的是什么事情,这里是要重复判断两端的字符是不是相等的,直到剩 ...
- day16 模块导入及环境变量
""" 今日内容: 1.模块 2.模块的导入 3.环境变量sys.path 4.模块间的相互调用 """ """ ...
- Linux用户管理命令介绍
1)管理用户命令总汇 2)管理用户组命令 总汇
- 【转帖】赤壁之战，曹操大败只因缺了Service Mesh
赤壁之战,曹操大败只因缺了Service Mesh 本文作者把微服务向 Service Mesh 的进化融入到了三国故事中,妙趣横生.故事比较长,大家慢慢看,精彩的在后边. http://develo ...
- 万能数据库的使用【DbVisualizer软件，连接不同类型的数据库】
1.打开指定的软件[万能连接数据库的软件],如图所示: 2.双击“此软件”,然后会显示出该软件的主页面,如图所示: 3.点击"任一个图标",会出现如下图所示的一个弹框,意思是:创建 ...
- Yii2.0 queue
https://www.yiichina.com/tutorial/1635 https://my.oschina.net/gcdong/blog/3031113 https://www.yii-ch ...
- luffy前台配置
目录 axios前后台交互 cokies操作 element-ui页面组件框架 bootstrap页面组件框架 前端主页 图片准备 页头组件:components/Header.vue 轮播图组件:c ...
- tensorflow零起点快速入门(1)
导入: 其中的TF_CPP_MIN_LOG_LEVEL据说是为了忽略警告,但是我这里没有意义(numpy的一些警告) import tensorflow as tf import os os.envi ...
- JS基础_for循环练习2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- sqlserver关于发布订阅replication_subscription的总结
(转载)sqlserver关于发布订阅replication_subscription的总结 来自 “ ITPUB博客 ” ,原文地址:http://blog.itpub.net/30126024/v ...