<!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. Appium获取toast消息（二）

    刚接触appium进行移动端设备的UI自动化,在遇到toast消息的时候很是苦恼了一阵,最后通过强大的搜索引擎找到了个相对解决方法,废话不多说,直接贴代码↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ...

  2. JSP常见的状态码

    1.404错误 -- 找不到访问的页面或资源 a.URL输入错误: b.未部署项目. 2.500错误 -- JSP页面代码有错误 3.302状态码+200状态码 -- 重定向 4.200状态码 -- ...

  3. Docker从入门到精通（三）——概念与执行流程

    前面我们大概介绍了docker是什么以及如何安装docker,但是对里面出现的一些名词,可能大家还不熟悉,这篇文章就来为大家解惑. 1.容器化平台 Docker 是提供应用打包,部署与运行应用的容器化 ...

  4. Markdown 语法粗学

    Markdown 语法粗学 Typora下载 Typora官网 下拉点击右上角 选择下载即可 里面选择自己想要的系统下载即可 如果下载缓慢,推荐使用各自的下载工具或者使用软件管家等 亲测迅雷速度尚可 ...

  5. [BUUCTF]REVERSE——[V&N2020 公开赛]CSRe

    [V&N2020 公开赛]CSRe 附件 步骤: 例行检查,无壳儿,但是有NET混淆,使用de4dot工具进行处理 之后用dnSpy打开,从入口点开始看程序 找到有关flag的信息 flag由 ...

  6. [BUUCTF]PWN——bbys_tu_2016

    bbys_tu_2016 附件 步骤: 例行检查,32位程序,开启了nx保护 本地试运行一下程序,看看大概的情况,测试时候发现输入长度过长程序会崩溃,猜测输入点存在问题 32位ida载入,检索程序里的 ...

  7. Kafka从入门到放弃（三）—— 详说消费者

    之前介绍了Kafka以及生产者,包括它的一些特性和参数,这回写一下消费者. 之前没看得可以点击链接阅读. Kafka从入门到放弃(一) -- 初识Kafka Kafka从入门到放弃(二) -- 详说生 ...

  8. CF1080B Margarite and the best present 题解

    Content 有 \(t\) 次询问,每次询问给定两个整数 \(l,r\),求 \(\sum\limits_{i=l}^r (-1)^i\times i\). 数据范围:\(1\leqslant t ...

  9. 优雅的按键模块-----Multi-button

    优雅的按键模块-----Multi-button ​ 在我们日常开发和使用的过程中常常使用了一些按键,利用按键实现不同的功能,比如长按,短按,双击等等.但是每次都是采用标志等等来实现信息的读取,是否有 ...

  10. es（elasticsearch）安装IK中文分词器

    IK压缩包下载地址:https://github.com/medcl/elasticsearch-analysis-ik/releases?after=v6.7.0,需要下载对应的版本 我也上传了 h ...