JavaScript 钩子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
<div>
<h1>--JavaScript 钩子--</h1>
<div id="example1">
<button @click="show = !show">Toggle</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">Demo</p>
</transition>
</div>
<script>
// Vue 根实例
var example1 = new Vue({
el: '#example1',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSeze: '1.4em' } ,{duration: 300})
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateX: '30px',
translateX: '30px',
opacity: 0
}, { complete: done})
},
}
})
</script>
</div>
</body>
</html>
JavaScript 钩子的更多相关文章
- 按照vue文档使用JavaScript钩子但是却不能执行动画？
大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 --------- JavaScript钩子 详情见vue文档: https://cn.vuejs.or ...
- Vue过渡：JavaScript钩子
一 App.vue <template> <div id="app"> <button @click="show = !show" ...
- javascript钩子机制
钩子机制是这样的,大家按照某一规则写一个方法(这个规则在方法名称上),然后页面加载完之前,统一执行所有的钩子函数. 注意callHooks方法,里面的局部变量s就是钩子函数名称中一定要有的内容.——这 ...
- vue.js过渡效果之--javascript钩子
写在前面 姊妹篇 vue.js之过渡效果-css.今天一篇博文阅读量破300,心里还是有点小激动的.没错,我就是这么容易满足(害羞).这个数据可能连大牛一篇文章阅读量的零头都没有,但这却是我个人的一 ...
- vue动画使用javascript钩子函数
钩子函数从before-enter – enter –after-enter-entercancelled也是一个完整的生命周期 <transition v-on:before-enter= ...
- 闭包传参 余额计算 钩子hook 闭包中的this JavaScript 钩子
闭包传参 余额计算 钩子hook 小程序 a=function(e){console.log(this)}() a=function(e){console.log(this)}() VM289 ...
- Vue过渡：用Velocity实现JavaScript钩子
Velocity is an animation engine with a similar API to jQuery's $.animate(). It has no dependencies, ...
- VUE动画Javascript钩子不生效问题记录
举例小球动画如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- XSS 前端防火墙 —— 无懈可击的钩子
昨天尝试了一系列的可疑模块拦截试验,尽管最终的方案还存在着一些兼容性问题,但大体思路已经明确了: 静态模块:使用 MutationObserver 扫描. 动态模块:通过 API 钩子来拦截路径属性. ...
随机推荐
- jQuery - focusin/focusout/focus/blur事件的区别与不同
focus与blur事件:不支持冒泡 focusin与focusout:支持冒泡 事件触发顺序: 对于同时支持这4个事件的浏览器,事件执行顺序为focusin(聚焦) > focus > ...
- JDK各版本新增的主要特性总结
JDK1.5新特性: 1.自动装箱与拆箱: 2.枚举 3.静态导入,如:import staticjava.lang.System.out 4.可变参数(Varargs) 5.内省(Introspec ...
- Mysql配置 主从同步
目录 一.准备 二.操作 主数据库操作 从服务器操作 一.准备 1.主从数据库版本最好一致 2.主从数据库内数据保持一致,若不一致,可将从库中所有数据删除,并将主库全部数据导入进去 主数据库:182. ...
- Jenkins分布式与并行
目录 一.简介 二.agent 通过JNLP协议增加agent 通过Swarm插件增加agent agent部分详解 三.agent放入Docker 使用Docker 配置Docker私有仓库 四.并 ...
- 关于thinkPHP中的自动加载和手动导入
首先先讲自动加载: 前提:你的第三方类库要满足(1)符合命名规范和后缀的类库(2)使用命名空间,命名空间和路径一致的类库 (1)在ThinkPHP目录下的library目录下的每一个子目录都是一个根命 ...
- [BUUCTF]PWN——axb_2019_fmt32
axb_2019_fmt32 附件 步骤: 例行检查,32位程序,开启了nx保护 本地试运行一下程序,看看大概的情况 32位ida载入 alarm(),是闹钟函数,主要功能是设置信号传送闹钟,即用来设 ...
- 祭出“成本”列（Project）
<Project2016 企业项目管理实践>张会斌 董方好 编著 今天开始成本. 张同学说,成本就是balabalabala-- 好吧,本妖向来不会背名词解释,不过有些公式还是需要背一下下 ...
- CVE 2021-44228 Log4j-2命令执行复现及分析
12月11日:Apache Log4j2官方发布了2.15.0 版本,以修复CVE-2021-44228.虽然 2.15.0 版本解决了Message Lookups功能和JNDI 访问方式的问题,但 ...
- Mysq索引优化（什么情况创建索引，什么情况不创建索引）
一.以下情况需要创建索引 1.主键自动建立唯一索引 2.频繁作为查询条件的字段应该创建索引 3.查询中与其他表关联的字段,外键关系建立索引 4.单键/组合索引的选择问题,组合索引性价比更高 5.查询中 ...
- JAVA调用WebService接口（以调用第三方天气接口为例）
天气接口地址:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx?wsdl 1.打开项目文件目录路径文件夹,在当前文件夹打开cmd, ...