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 钩子来拦截路径属性. ...
随机推荐
- 解决PLSQL查不到带中文条件的记录
原因: PLSQL乱码问题皆是ORACLE服务端字符集编码与PLSQL端字符集编码不一致引起.类似乱码问题都可以从编码是否一致上面去考虑. 解决: 1. 查询Oracle服务端字符集编码,获取NLS_ ...
- pandas读取csv文件中文乱码问题
1.为什么会出现乱码问题,用什么方式编码就用什么方式解码,由于csv不是用的utf-8编码,故不能用它解码. 常用的编码方式有 utf-8,ISO-8859-1.GB18030等. 2.中文乱码原因: ...
- Tableau使用折线图和饼图的组合
一.订单日期拖拽至列-右键天(具体到年月日) 二.订单日期拖拽至筛选器-年月-随机选择一个月的数据 三.创建计算字段-LOD-销售额 {EXCLUDE[类别]:SUM([销售额])} 四.销售额和刚刚 ...
- 纯css设置元素高度与宽度相等
设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...
- OpenGL ES2.0 入门经典例子
原文链接地址:http://www.raywenderlich.com/3664/opengl-es-2-0-for-iphone-tutorial 免责申明(必读!):本博客提供的所有教程的翻译原稿 ...
- 两大js移动端调试神器 / 调试工具分享 ！
分享大家一个CDN网站:https://www.bootcdn.cn/ eruda 移动端网页调试工具的使用: <script src="https://cdn.bootcdn.net ...
- [BUUCTF]REVERSE——[WUSTCTF2020]level3
[WUSTCTF2020]level3 附件 步骤: 例行检查,64位程序,无壳 64位ida载入,找到关键函数 看样子是个base64加密,但又感觉没那么简单,再翻翻左边的函数,找到了base64加 ...
- CF313A Ilya and Bank Account 题解
Update \(\texttt{2021.3.6}\) 经求学的企鹅提醒修改了 Content 部分的数据范围. Content 有一个人的银行账户里有 \(n\) 元钱,他可以删去倒数第二位获最后 ...
- 年度最受欢迎的开源CHROME插件
又到了年底,时间过得飞快,每到年底就有各种各样的总结各种各样的奖项出来.前几天谷歌就公布了2021年年度最受欢迎Chrome插件名单,名单共有13个. 让很多网友费解的是,其中有很多并不是今年刚出现的 ...
- pl/sql属性类型
pl/sql 属性类型 %TYPE - 引用变量和数据库列的数据类型 %ROWTYPE - 提供表示表中一行的记录类型 显示输出scott.emp表中的部分数据 declare emp_number ...