Vue的JavaScript钩子

最新推荐文章于 2024-08-15 22:00:44 发布

微雨即至

最新推荐文章于 2024-08-15 22:00:44 发布

阅读量127

点赞数

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/weixin_45665589/article/details/108474721

版权

Vue学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript钩子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript钩子（使用Velocity）</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
    <div id = "demo">
          <button @click = "show = !show">click me</button>
          <transition 
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
            v-bind:css="false"
          >
              <p v-if="show">ling</p>
          </transition>
          
    </div>

    <script>
         var vm = new Vue({
             el:'#demo',
             data:{
                 show:false
             },
             methods:{
                beforeEnter: function (el) {
                    el.style.opacity = 0;
                    el.style.transformOrigin = 'left'
                },
                enter: function (el, done) {
                    Velocity(el, { opacity: 1, fontSize: '3em' }, { 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',
                        translateY: '100px',
                        translateX: '100px',
                        opacity: 0
                    }, { complete: done })
                }
             }
         })


    </script>
</body>
</html>

效果图

在这里插入图片描述
参考文档
Vue.js文档
 Velocity.js 中文文档

微雨即至

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的JavaScript钩子

JavaScript钩子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>javascript钩子（使用Velocity）</title> <script
复制链接

扫一扫

专栏目录