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秒!"/ ...
随机推荐
- 从0开始学爬虫7之BeautifulSoup模块的简单介绍
参考文档: https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ # 安装 beautifulsoup4 (pytools) D:\pyt ...
- Qt bug
1.Qt5.2.1不支持QQuickwidget来承载qml 2.Qt5.12以及以上,不支持跨线程调用数据库连接 3.线程A不断产生sql语句,需要让两个数据库分别执行这个sql语句.所以在线程A中 ...
- Docker容器（一）——Docker的介绍与部署
(1).Docker概述 Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的Linux或Windows机器上,也可以实现虚拟化.容器是 ...
- 【serviceaccount 和 clusterrolebinding】
kubectl get clusterrolebinding kubectl create clusterrolebinding suosheng-rebinding --clusterrole=cl ...
- jQuery 控制網頁捲軸移動 & Ignore link '#' method jump action
$('a.gotoheader').click(function(){ // 讓捲軸移動到 0 的位置 $(); // ignore link "#" method return ...
- Nodejs Client for FastDFS
FastDFS 是分布式文件存储系统.这个项目是FastDFS的NodeJS客户端,用来与FastDFS Server进行交互,进行文件的相关操作.我测试过的server版本是4.0.6. githu ...
- Socket测试工具（客户端、服务端）
Socket是什么? SOCKET用于在两个基于TCP/IP协议的应用程序之间相互通信.最早出现在UNIX系统中,是UNIX系统主要的信息传递方式.在WINDOWS系统中,SOCKET称为WINSOC ...
- logstash kafka output 日志处理
今天在用logstash解析日志并传送给kafka的时候,发现kafka能收到数据但数据内容已经丢失,具体如下: 在logstash output中增加输出样式之后,问题解决kafka再次接受到的内容 ...
- 13、OpenCV实现图像的空间滤波——图像平滑
1.空间滤波基础概念 1.空间滤波基础 空间滤波一词中滤波取自数字信号处理,指接受或拒绝一定的频率成分,但是空间滤波学习内容实际上和通过傅里叶变换实现的频域的滤波是等效的,故而也称为滤波.空间滤波主要 ...
- windows server 2012 r2 无法安装 .net 3.5
服务器需安装SQL 2012 ,因需安装.net3.5,没有想到2012出于安全竟然不让手动安装,对于源文件也是把控比较严,折腾了好一会儿才解决问题 有参才一下powershell等安装命令,均失败. ...