第六章 组件 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 ...
随机推荐
- python录音并调用百度语音识别接口
#!/usr/bin/env python import requests import json import base64 import pyaudio import wave import os ...
- 截取铃声python代码
from pydub import AudioSegment file_name = "张杰 - 这就是爱.mp3" sound = AudioSegment.from_mp3(f ...
- [转帖]@RequestMapping 用法详解之地址映射(转)
@RequestMapping 用法详解之地址映射(转) https://www.cnblogs.com/qq78292959/p/3760560.html 从csdn 发现的文章 然后csdn指向c ...
- 【Python】【demo实验32】【回文数的确认】
原题: 我的代码: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- #判断一个数字是否为回文数 即 12345654321 x = ...
- Android Application的基本组件介绍
一个Android应用通常由一个或多个基本组件组成,常用的一般有Activity.Service.BroadcastReceiver.ContentProvider.Intent等等. ⒈Activi ...
- Vasya and Endless Credits CodeForces - 1107F (二分图完美匹配)
大意: n中贷款, 每种只能买一次, 第$i$种给$a_i$元, 要还款$k_i$个月, 每个月底还$b_i$元. 每个月可以在月初申请一种贷. 求某一时刻能得到的最大钱数.
- webSocket协议和Socket.IO
一.Http无法轻松实现实时应用: ● HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接. ● 我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子), ...
- Qt常用快捷键
F1 查看帮助F2 跳转到函数定义(和Ctrl+鼠标左键一样的效果)Shift+F2 声明和定义之间切换F4 头文件和源文件之间切换Ctrl+1 ...
- qq快捷打开聊天窗口的代码
pc代码: http://wpa.qq.com/msgrd?v=3&uin=8423291&site=qq&menu=yes
- webpack开启本地服务器与热更新
第一个webpack本地服务 webpack本地服务相关的一些操作指令与应用 一.第一个webpack本地服务 //工作区间 src//文件夹 index.js//入口文件 index.css//测试 ...