第六章 组件 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 ...
随机推荐
- Int8，Int16，Int32，Int64 有啥不同呢？看了立马就懂！
大家有没有写了很久代码,还不知道这个Int8,Int16, Int32, Int64有什么区别呢?或者是为什么后面的数字不一样呢? 初步了解了一下,才清楚这个东西. 先来扫盲一下计算机存储单元, 在计 ...
- 【miscellaneous】海康相机RTSP连接代码分析
海康相机RTSP连接代码分析 最近在做海康相机rtsp连接获取音视频的工作,现在介绍一下分析过程和源码. [源码在我上传的共享资料中: http://download.csdn.net/detail/ ...
- 【Matlab开发】MATLAB编译C/C++代码
在使用MATLAB编译C/C++代码时,C/C++代码中要使用一个mexFunction函数,那么这个函数是如何定义,在编译时又是如何实现的呢?下面我将使用实例进行说明. 如一个简单的函数: doub ...
- 2019牛客暑期多校训练营（第五场）- G subsequence 1
题目链接:https://ac.nowcoder.com/acm/contest/885/G 题意:给定字符串s,t,求s中满足字典序大于t的子序列的个数. 思路:组合数学+dp.当子序列长度大于m时 ...
- [bzoj3193][JLOI2013]地形生成_排列组合_贪心
[JLOI2013]地形生成 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3193 题解: 这种求总排列的题,一种常规做法就是所有的元素 ...
- 【转帖】k8s-kubectl命令大全
https://www.cnblogs.com/fuyuteng/p/9458282.html 学习一下 Kubectl命令行管理对象 类型 命令 描述 基础命令 create 通过文件名或标准输入创 ...
- /tmp/orbit-oracle/目录inode耗尽
[root@iZ25zpeock2Z orbit-oracle]# cd /[root@iZ25zpeock2Z /]# du -cks * |sort -nr|head -n 20du: canno ...
- thinkphp命令行生成模型类
thinkphp命令行生成模型类 当你需要创建大量的模型类的时候,不妨考虑下命令行生成,可以快速创建模型类. 在windows下面,使用Win+R输入cmd进入命令控制台,切换到项目根目录(也就是th ...
- Jmeter之TCP取样器（模拟数据上报压测）
TCP压测 场景:模拟硬件设备上报数据(登录,心跳,GPS定位数据/光感数据/电量数据),对这个功能进行压测 啰嗦一句:TCP压测很简单,只要调通了一个TCP,后续的逻辑判断就用逻辑控制器和正则处理就 ...
- Spring Boot源码分析-启动过程
Spring Boot作为目前最流行的Java开发框架,秉承"约定优于配置"原则,大大简化了Spring MVC繁琐的XML文件配置,基本实现零配置启动项目. 本文基于Spring ...