<!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. Dubbo服务限流

    为了防止某个消费者的QPS或是所有消费者的QPS总和突然飙升而导致的重要服务的失效,系统可以对访问流量进行控制,这种对集群的保护措施称为服务限流. Dubbo中能够实现服务限流的方式较多,可以划分为两 ...

  2. 【编程思想】【设计模式】【行为模式Behavioral】chain

    Python版 https://github.com/faif/python-patterns/blob/master/behavioral/chain.py #!/usr/bin/env pytho ...

  3. Oracle删除重复数据记录

    删除重复记录,利用ROWID 和MIN(或MAX)函数, ROWID在整个数据库中是唯一的,由Oracle自己产生和维护,并唯一标识一行(无论该表中是否有主键和唯一性约束),ROWID确定了每条记录在 ...

  4. SpringColud微服务-微服务概述

    一.什么是微服务架构 微服务架构是一种架构模式,它提倡讲单一应用程序划分为一组小的服务,服务之间互相协调.互相配合,为用户提供最终价值.每个服务运行在单独的进程当中,服务与服务之间采用轻量级的通信机制 ...

  5. Win10 Chrome 在DPI缩放下导致界面放大问题 解决方案

    支持:54.0.2840.59 m (64-bit) 以下大多数版本,具体未测试.如有问题可以反馈一下. 方法1:为程序设置"高DPI设置时禁用显示缩放. 方法2:为程序添加启动参数: /h ...

  6. 00 - Vue3 UI Framework - 阅读辅助列表

    阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...

  7. Python用matplotlib绘图网格线的设置

    一.X轴网格线的设置 import matplotlib.pyplot as plt import numpy as np from pylab import mpl mpl.rcParams['fo ...

  8. for循环中的变量泄漏

    经典的案例 let arr = [] for(var i =0;i<=5;i++){ arr[i]= function fn(){ console.log(i) } } arr[0]() //6 ...

  9. 利用docker-compose一键部署

    利用docker-compose一键部署 目录 利用docker-compose一键部署 前言 快速编写微服务 common-api nacos-server-provider nacos-serve ...

  10. [BUUCTF]REVERSE——SimpleRev

    SimpleRev 附件 步骤: 例行查壳儿,,无壳,64位程序 64位ida载入,看main函数 关键代码段在Decry函数里 unsigned __int64 Decry() { char v1; ...