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秒!"/ ...
随机推荐
- spark.sql.shuffle.partitions和spark.default.parallelism的区别
在关于spark任务并行度的设置中,有两个参数我们会经常遇到,spark.sql.shuffle.partitions 和 spark.default.parallelism, 那么这两个参数到底有什 ...
- Qt获取时间戳作为图片名
Qt获取时间戳作为图片名 //保存图片 void SaveRealsenseImg() { QString picIndexName = dataSavePath; picIndexName.appe ...
- 【Java】Spring之Resource（三）
Java的各种URL前缀的标准类和标准处理程序不足以完全访问低级资源.例如,没有URL可用于访问需要从类路径或相对于a获取的资源的标准化实现 ServletContext.虽然可以为专用URL 前缀注 ...
- 【Mybatis】MyBatis之缓存（七）
MyBatis缓存介绍 Mybatis 使用到了两种缓存:一级缓存(本地缓存.local cache)和二级缓存(second level cache). 一级缓存:基于PerpetualCache ...
- Spring 定时任务 注解版
Task类: ManageSql.Java对应代码: package com.axb.cheney.task; import java.sql.ResultSet; import java.sql.S ...
- jvm误区--动态对象年龄判定
原文链接:https://blog.csdn.net/u014493323/article/details/82921740 虚拟机并不是永远地要求对象的年龄必须达到了MaxTenuringThres ...
- 原生xgboost中如何输出feature_importance
网上教程基本都是清一色的使用sklearn版本,此时的XGBClassifier有自带属性feature_importances_,而特征名称可以通过model._Booster.feature_na ...
- 在CentOS7 安装 Redis数据库
环境说明: 名称 版本 CentOS CentOS Linux release 7.4.1708 (Core) VMware Fusion 专业版 10.1.1 (7520154) SSH Shell ...
- python学习-53 正则表达式
正则表达式 就其本质而言,正则表达式是一种小型的/高度专业化的编程语言,它内嵌在python中,并通过RE模块实现,正则表达式模式被编译成一系列的字节码,然后由用C编写的匹配引擎执行. 1.元字符 - ...
- k8s开发实践
代码自动生成:https://blog.openshift.com/kubernetes-deep-dive-code-generation-customresources/ 自定义controlle ...