<!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 钩子的更多相关文章

  1. 按照vue文档使用JavaScript钩子但是却不能执行动画？

    大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 ---------  JavaScript钩子 详情见vue文档:  https://cn.vuejs.or ...

  2. Vue过渡：JavaScript钩子

    一 App.vue <template> <div id="app"> <button @click="show = !show" ...

  3. javascript钩子机制

    钩子机制是这样的,大家按照某一规则写一个方法(这个规则在方法名称上),然后页面加载完之前,统一执行所有的钩子函数. 注意callHooks方法,里面的局部变量s就是钩子函数名称中一定要有的内容.——这 ...

  4. vue.js过渡效果之--javascript钩子

    写在前面 姊妹篇  vue.js之过渡效果-css.今天一篇博文阅读量破300,心里还是有点小激动的.没错,我就是这么容易满足(害羞).这个数据可能连大牛一篇文章阅读量的零头都没有,但这却是我个人的一 ...

  5. vue动画使用javascript钩子函数

    钩子函数从before-enter – enter –after-enter-entercancelled也是一个完整的生命周期 <transition   v-on:before-enter= ...

  6. 闭包传参 余额计算 钩子hook 闭包中的this JavaScript 钩子

    闭包传参  余额计算    钩子hook 小程序 a=function(e){console.log(this)}() a=function(e){console.log(this)}() VM289 ...

  7. Vue过渡：用Velocity实现JavaScript钩子

    Velocity is an animation engine with a similar API to jQuery's $.animate(). It has no dependencies, ...

  8. VUE动画Javascript钩子不生效问题记录

    举例小球动画如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. XSS 前端防火墙 —— 无懈可击的钩子

    昨天尝试了一系列的可疑模块拦截试验,尽管最终的方案还存在着一些兼容性问题,但大体思路已经明确了: 静态模块:使用 MutationObserver 扫描. 动态模块:通过 API 钩子来拦截路径属性. ...

随机推荐

  1. Shell脚本实现乱序排列文件内容的多种方法（洗牌问题）

    洗牌问题:洗一副扑克,有什么好办法?既能洗得均匀,又能洗得快?即相对于一个文件来说怎样高效率的实现乱序排列? ChinaUnix 确实是 Shell 高手云集的地方,只要你想得到的问题,到那里基本上都 ...

  2. my43_mysql内存相关概念

    相关参数 read_buffer_size https://dev.mysql.com/doc/refman/8.0/en/server-system-variables.html#sysvar_re ...

  3. 前端两大框架 vue 和 react 的区别

    1. 设计思想 vue: vue的官网介绍说vue是一种渐进式框架,采用自底向上增量开发的设计: react: 采用函数式编程,推崇纯组件,数据不可变,单向数据流: 2. 编写语法 vue: 采用单文 ...

  4. Declarative Pipeline 基础语法

    Declarative Pipeline(声明式)核心概念 核心概念用来组织pipeline的运行流程 1.pipeline :声明其内容为一个声明式的pipeline脚本 2.agent:执行节点( ...

  5. 【dva】dva的基本用法

    services 该文件夹用于存储services,里面的内容为接口调用函数,记得将数据返回.(request是我自己封装函数,也可以用axios原生的函数) const finishTask = { ...

  6. [BUUCTF]PWN——mrctf2020_easyoverflow

    mrctf2020_easyoverflow 附件 步骤: 例行检查,64位程序,保护全开 本地试运行的时候就直接一个输入,然后就没了,直接用64位ida打开 只要满足18行的条件,就能够获取shel ...

  7. java 多线程： Thread 锁ReentrantLock 常用方法

    注意 reentrantLock 和 同步代码块儿一样,同一个时刻只能一个线程获取锁,也就是共用锁的代码块部分,线程是顺序执行的 ReentrantLock 常用方法 getHoldCount获取当前 ...

  8. Base64编码原来是这么回事儿

    鸣谢CSDN文章:https://blog.csdn.net/believesoul/article/details/84100616 一.言简意赅理解Base64编码 就是将以"字节&qu ...

  9. 【九度OJ】题目1171：C翻转 解题报告

    [九度OJ]题目1171:C翻转 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1171 题目描述: 首先输入一个5 * 5的数组,然 ...

  10. Quoit Design（hdu1007）

    ---恢复内容开始--- Quoit Design Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...