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秒!"/ ...
随机推荐
- ROS tf基础使用知识
博客参考:https://www.ncnynl.com/archives/201702/1306.html ROS与C++入门教程-tf-坐标变换 说明: 介绍在c++实现TF的坐标变换 概念: Co ...
- Apache使用内置插件mod_php解析php的配置
apache安装完毕之后,修改httpd.conf配置文件,添加代码如下: LoadModule php5_module modules/libphp5.so <FilesMatch \.php ...
- 抓取二维数组某值出来,到一维数组---array_column
/*** * '抓取二维数组某值出来,到一维数组' * @param $arr * @param $item * @return array */ function get_arr_item_val( ...
- 【计算机视觉】OpenCV篇(9) - 轮廓（寻找/绘制轮廓）
什么是轮廓? 轮廓是一系列相连的点组成的曲线,代表了物体的基本外形. 轮廓与边缘好像挺像的? 是的,确实挺像,那么区别是什么呢?简而言之,轮廓是连续的,而边缘并不全都连续(见下图示例).其实边缘主要是 ...
- git 本地项目推送到远程服务器
3进入本地电脑的将要上传的项目的目录下面 1)git init 初始化一个git 2) vim .gitignore 新增以及编写这个文件 node_modules/ 意思就是上传的时候忽略这个文件 ...
- CSS3 column 分栏
column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的 ...
- Data - 【转】数据分析的道与术
简要说明 本文来自网络流传的"百度内部培训PPT - 数据分析的道与术",版权属于"百度",如有冒犯,即刻删除. PDF下载 - 数据分析的道与术 什么是数据分 ...
- C# 邮件发送遇到的错误
记录写邮件发送功能遇到的一些错误 1.System.Net.Mail.SmtpException:“Transaction failed. The server response was: DT:SP ...
- Raspberry Pi 3B I2C 问题
刚刚接触树莓派,的确很适合用来学习,资料多而且很规范,开发者多,平台统一,很多问题别人都已经解决.
- 对String对象进行JSON序列化
对对象进行JSON序列化,会得到类似key:value的形式. 但是如果对一个String字符串进行JSON序列化会得到什么? 测试下: public class TestMain2 { pu ...