<!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. 应用springMVC时如果配置URL映射时如下配置

    应用springMVC时如果配置URL映射时如下配置 [html] view plaincopy<servlet> <servlet-name>appServlet</s ...

  2. redis入门到精通系列（八）：redis的高可用--主从复制详解

    (一)主从复制介绍 前面所讲的关于redis的操作都属于单机操作,单机操作虽然操作简单,但是处理能力有限,无法高可用.所谓高可用性,就是指当一台服务器宕机的时候,有备用的服务器能顶替上,在单机操作上这 ...

  3. 【Linux】【Shell】【Basic】Bash

    命令历史:shell进程会在其会话中保存此前用户提交执行过的命令: ------------------------------------------------------------------ ...

  4. 【Services】【Web】【LVS】lvs基础概念

    1.简介 1.1. 作者:张文嵩,就职于阿里 1.2. LVS是基础四层路由.四层交换的软件,他根据请求报文的目标IP和目标PORT将其调度转发至后端的某主机: 1.3. IPTABLES的请求转发路 ...

  5. 【Java基础】HashMap原理详解

    哈希表(hash table) 也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维护一张大的哈希表,本文会对java集合框架中Has ...

  6. JS - 字符串转换成数组，数组转换成字符串

    1.字符串转换成数组: var arr = "1, 2, 3, 4, 5, 6"; arr.split(","); // ["1",&quo ...

  7. TV盒子 android 4.4安装kodi 和 安装jellyfin插件连接到 jellyfin服务器

    很多IPTV盒子系统都是android 4.4的,无法安装新版kodi, 最高只能安装到改版的kodi, 版本是17.1,jellyfin插件也只能安装到0.5.8 首先下载kodi和jellyfin ...

  8. Linux目录终章，单用户模式修改密码、环境变量、第三方软件安装

    目录 今日内容概要 内容详细 解析映射文件 磁盘挂载文件 开机加载脚本 系统启动级别 使用单用户模式修改密码 变量加载文件 登录提示信息 第三方软件安装目录(编译安装目录) 系统日志目录 保存系统运行 ...

  9. 热部署详细步骤---·> 小热身！

    IDEA 2018.1.5 4版本 热部署 网址:https://www.jb51.net/softjc/629271.html

  10. Jenkins环境变量

    目录 一.环境变量 二.自定义环境变量 三.自定义全局变量 四.常用变量定义 五.常用环境变量 一.环境变量 环境变量可以被看作是pipeline与Jenkins交互的媒介.比如,可以在pipelin ...