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秒!"/ ...
随机推荐
- Python 相对导入attempted relative import beyond top-level package
ValueError: attempted relative import beyond top-level package 假设有如下层次包目录 project/ __init__.py mypac ...
- javaselenium遇到的问题和解决方法(还没试，遇到问题可以先看这里)
Firefox路径问题 firefox火狐浏览器去完成自动化测试时,代码报了如下错误: Cannot find firefox binary in PATH. mark sure firefox is ...
- java.net.NoRouteToHostException: Cannot assign requested address 问题分析(端口被用完的解决方法)
问题: 错误原因: 由于liunx 分配的客户端连接端口用尽,无法建立socket连接所致,虽然socket正常关闭,但是端口不是立即释放,而是处于 TIME_WAIT 状态,默认等待60s后释放.查 ...
- ubuntu18.04手动安装二进制MySQL8.0
wget https://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.13-linux-glibc2.12-x86_64.tar.xz tar xvJf ...
- 迅速生成项目-react-scripts
推荐指数:
- axios发了两次请求
一.问题描述 用axios发post请求,却出现了options请求和post请求,options请求哪里来的? 二.问题分析 1.先温习一下跨域的知识 2.axios默认类型是Content-Typ ...
- line-height超出隐藏显示的行数和垂直居中
line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...
- web端自动化——Python读取txt文件、csv文件、xml文件
1.读取txt文件 txt文件是我们经常操作的文件类型,Python提供了以下几种读取txt文件的方式. 1)read(): 读取整个文件. 2)readline(): 读取一行数据. 3)readl ...
- Python：实现图片裁剪的两种方式——Pillow和OpenCV
原文:https://blog.csdn.net/hfutdog/article/details/82351549 在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还 ...
- SQL网页端在线自定义查询工具
TreeSoft数据库管理系统,是用JAVA开发,基于网页的数据库SQL查询工具.功能包括:数据库的展示,库表的展示,表字段结构的展示,SQL语句的在 线编辑批量执行,表结构的在线设计维护,数据的在线 ...