<!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. SVN终端演练(个人开发\多人开发)

    SVN终端演练(个人开发) ### 1. 命令格式 命令行格式: svn <subcommand> [options] [args]       svn 子命令 [选项] [参数]     ...

  2. 转：addChildViewController实现网易新闻首页切换

    本来只是打算介绍一下addChildViewController这个方法的,正好今天朋友去换工作面试问到网易新闻标签栏效果的实现,就结合它,用个小Demo实例介绍一下:(具体解释都写在了Demo里面的 ...

  3. Python __new__ 方法解释与使用

    解释 我们通常把 __init__ 称为构造方法,这是从其他语言借鉴过来的术语. 其实,用于构建实例的是特殊方法 __new__:这是个类方法(使用特殊方式处理,因此不必使用 @classmethod ...

  4. Axios的正确食用方法

    这里分享出我个人封装的一个axios,我会尽量每行注释,希望对大家有所帮助. 1. 安装 全局执行代码 npm install axios; 2. 编写全局axios文件(附件里有代码) 在src目录 ...

  5. 自定义函数（Power Query 之 M 语言）

    数据源: 任意工作簿 目标: 使用自定义函数实现将数据源导入Power Query编辑器 操作过程: PowerQuery编辑器>主页>新建源>其他源>空查询 编辑栏内写入公式 ...

  6. matplotlib模块详解

    简单绘图,折线图,并保存为图片 import matplotlib.pyplot as plt x=[1,2,3,4,5] y=[10,5,15,10,20] plt.plot(x,y,'ro-',c ...

  7. WebRTC本地插入多个转发节点

    网络延迟是一种比较常见的情况.在本地网页上,我们可以建立多个RTCPeerConnection,增加转发次数,来模拟出网络延迟的效果. 建立通话后,再往后面增加本地转发节点. 准备 页面准备,方便我们 ...

  8. loger4j时间一长，就不向数据库里写日志啦，然而重新启动工程后就可以再次向数据库写日志，好奇怪

    loger4j时间一长,就不向数据库里写日志啦,然而重新启动工程后就可以再次向数据库写日志,好奇怪

  9. action中redirectAction到另一个命名空间中的action该如何配置

    action中redirectAction到另一个命名空间中的action该如何配置,请注意namespace这儿必须是/global,而不是global,要不然找不到此action的

  10. react 结合gitte 创建项目(详情步骤)

    ​ 创建项目第一步 基本搭建 在创建之前,需要有一个git 仓库,我们要把项目搭建到git 中 目录介绍 cd 到某个盘 mkdir workspace 创建workspace文件夹 cd works ...