js钩子函数实现一个简单动画
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#ball {
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
}
</style>
</head>
<!--
vue动画的js钩子函数相当于动画的生命周期函数
。before-enter:进入之前触发
。after-enter：进入后触发
。enter-cancelled：结束进入阶段
。before-leave:进入之前触发
。after-leave：进入后触发
。leave-cancelled：结束进入阶段
-->
<!-- 本例子只需进入阶段的动画效果 -->
<body>
<div id="app">
<input type="button" value="点我" @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div id="ball" v-show="flag"></div>
</transition>
</div> </body>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {//初始小球不显示
flag: false
},
methods: {
// el 即操作的元素对象
beforeEnter(el) {
el.style.transform='translate(0,0)';//初始小球位置
},
enter(el){
//必须加下面一行，否则不会出现应有的效果
el.offsetWidth;//这里可以理解成强制浏览器刷新，也可以写el.offsetHeight
el.style.transition='all 1.5s ease';
el.style.transform='translate(150px,250px)';
},
afterEnter(el){
console.log('ok');
this.flag=false;//隐藏小球
}
}
});
</script> </html>
js钩子函数实现一个简单动画的更多相关文章
- js eval函数写一个简单的计算器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 用node.js从零开始去写一个简单的爬虫
如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...
- js 排列 组合 的一个简单例子
最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比 ...
- js eval()函数 接收一个字符串，做为js代码来执行。 如： s='var d="kaka"'; 或者s=‘function (code){return code }’;
eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法“{}”并不能返回一个值, ...
- 搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
- Node.js实战14：一个简单的TCP服务器。
本文,将会展示如何用Nodejs内置的net模块开发一个TCP服务器,同时模拟一个客户端,并实现客户端和服务端交互. net模块是nodejs内置的基础网络模块,通过使用net,可以创建一个简单的tc ...
- 利用JS跨域做一个简单的页面访问统计系统
其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...
- 利用JS跨域做一个简单的页面訪问统计系统
事实上在大部分互联网web产品中,我们一般会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便能够在这些统计系统中看到自己站点页面详细的訪问情况.可是有些时候,因为一些特殊情况,我 ...
- js笔记（制作一个简单的计数器）
首先编写静态页中的按钮: <input id="result" type="button" value="该程序已经运行了0秒!"/ ...
随机推荐
- shell编程系列23--shell操作数据库实战之mysql命令参数详解
shell编程系列23--shell操作数据库实战之mysql命令参数详解 mysql命令参数详解 -u 用户名 -p 用户密码 -h 服务器ip地址 -D 连接的数据库 -N 不输出列信息 -B 使 ...
- [错误处理]no matches found: connexion[swagger-ui] ？
问题原因: [ ] 中括号会影响shell脚本的执行 安装的时候在包名扩上双引号"" pip install "connexion[swagger-ui]" w ...
- Spring Boot与ActiveMQ的集成
Spring Boot对JMS(Java Message Service,Java消息服务)也提供了自动配置的支持,其主要支持的JMS实现有ActiveMQ.Artemis等.本节中,将以Active ...
- F5 BIG-IP – Useful SNMP oids to monitor
I have collected some of the most interesting OIDs (in my scenario im using LTM and APM modules) fro ...
- ECMAScript 6复习<一>
1.let和const命令: let不存在变量提升 暂时性死区 let在相同作用域内不允许重复声明 2.块级作用域: 3.全局对象的属性: ; window.a let b = ; window.b ...
- [转]动态规划DP的分类
链接地址:http://www.cnblogs.com/Renyi-Fan/p/9285495.html
- SpringBoot学习笔记：自定义拦截器
SpringBoot学习笔记:自定义拦截器 快速开始 拦截器类似于过滤器,但是拦截器提供更精细的的控制能力,它可以在一个请求过程中的两个节点进行拦截: 在请求发送到Controller之前 在响应发送 ...
- 欧姆龙PLC_CP1H_CRC校验
1.简介 欧姆龙CP1H PLC的CRC校验.CP1H没有CRC校验指令或者功能块,在串口自由协议通信中,如果涉及到CRC校验,需要手动计算CRC值,本程序是一个输入数据,自动计算CRC校验码的程序. ...
- 高级UI-属性动画
在3.0以前,动画效果主要为补间动画(TweenAnimation)和帧动画(FrameAnimation),从3.0开始加入了属性动画,其本质就是不断地改变控件的属性,从而达到复杂的动画效果,其效果 ...
- centos7 双网口绑定
1.关闭和停止NetworkManager服务 systemctl stop NetworkManager.service # 停止NetworkManager服务 systemctl disable ...