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 钩子来拦截路径属性. ...
随机推荐
- 找出1小时内占用cpu最多的10个进程的shell脚本
cpu时间是一项重要的资源,有时,我们需要跟踪某个时间内占用cpu周期最多的进程.在普通的桌面系统或膝上系统中,cpu处于高负荷状态也许不会引发什么问题.但对于需要处理大量请求的服务器来讲,cpu是极 ...
- shell 截取字符串实例教程
本节内容:shell字符串截取方法 1,去掉字符串最左边的字符 [root@jbxue ~]$ vi test.sh 1 STR="abcd" 2 STR=${STR#" ...
- 3.1 go context代码示例
context.WithCancel返回两个有关联的对象,ctx与cancel,调用cancel发送一个空struct给ctx,ctx一旦接收到该对象后,就终止goroutine的执行;ctx是线程安 ...
- 【Service】【Database】【Oracle】Oracle client 12.1.0.2 for MacOS
1. 概述:为了在我的macos上搭建python的cx_Oracle开发环境,首先需要配置oracle client 2. 环境与版本: 2.1. OS:Mac OS Sierra 10.12.2 ...
- MySQL索引及性能优化分析
一.SQL性能下降的原因 查询语句问题,各种连接.子查询 索引失效(单值索引.复合索引) 服务器调优及各个参数设置(缓冲.线程池等) 二.索引 排好序的快速查找数据结构 1. 索引分类 单值索引 一个 ...
- CSS font-size: 0去除内联元素空白间隙
我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性.同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block.这样一来,有时在页面中会出现意外的空 ...
- sftp 上传下载 命令介绍
sftp是Secure FileTransferProtocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法. sftp与 ftp有着几乎一样的语法和功能.SFTP为 SSH的一部分 ...
- Spring Boot项目的探究
一.pom.xml文件 1.父项目 <parent> <groupId>org.springframework.boot</groupId> <artifac ...
- 莫烦python教程学习笔记——线性回归模型的属性
#调用查看线性回归的几个属性 # Youtube video tutorial: https://www.youtube.com/channel/UCdyjiB5H8Pu7aDTNVXTTpcg # ...
- 使用IDEA整合spring4+spring mvc+hibernate
配置文件 spring-mvc.xml 1 <?xml version="1.0" encoding="UTF-8"?> 2 <beans x ...