VUE入门到实战--Vue中JS动画和Velocity.js的结合

1、JS钩子的应用1、js钩子和生命周期钩子有点相似，在动画发生的整个过程中，会在特定的时间和区间执行一些函数，我们在这些函数当中去书写我们的JS代码，形成我们的动画效果。<!DOCTYPE html><html lang="en"><head><meta charset=&quo

taopoppy

3130人浏览 · 2018-10-17 09:39:35

taopoppy · 2018-10-17 09:39:35 发布

1、JS钩子的应用

1、js钩子和生命周期钩子有点相似，在动画发生的整个过程中，会在特定的时间和区间执行一些函数，我们在这些函数当中去书写我们的JS代码，形成我们的动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS动画和Velocity.js</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--JS钩子-->
        <transition 
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
            <div v-show="show">hello world</div>
        </transition>
        <button @click="handleBtnClick">toggle</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleBtnClick: function() {this.show = !this.show;},
                handleBeforeEnter: function(el) {//@before-enter:发生在动画前的一瞬间，el就是动画元素
                    el.style.color="red";
                },
                handleEnter: function(el,done) {//@enter:发生在动画执行的时候
                    setTimeout(()=>{el.style.color="green"},2000);
                    setTimeout(()=>{done()},4000);//动画结束后一定要手动执行一下done函数，告诉Vue动画执行完了
                    
                },
                handleAfterEnter: function(el) {//@after-enter:发生在done()执行之后
                    el.style.color="black";
                }
            }
        })
    </script>
</body>
</html>

2、使用velocity.js：去官方网站下载velocity.js文件，然后引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS动画和Velocity.js</title>
    <script src="./vue.js"></script>
    <script src="./velocity.js"></script>
</head>
<body>
    <div id="root">
        <!--JS钩子-->
        <transition 
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnter"
        >
            <div v-show="show">hello world</div>
        </transition>
        <button @click="handleBtnClick">toggle</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true,
            },
            methods: {
                handleBtnClick: function() {this.show = !this.show;},
                handleBeforeEnter: function(el) {
                    el.style.opacity = 0;
                },
                handleEnter: function(el,done) {
                    //Velocity的三个参数，第一个是元素，第二个是参与动画的属性，第三个是动画的一些参数
                    Velocity(el,{
                        opacity: 1
                    },{
                        duration: 1000,
                        complete: done,
                    })
                },
                handleAfterEnter: function(el) {
                    console.log("动画结束");
                }
            }
        })
    </script>
</body>
</html>

3、可以看一下官网上稍微复杂点的实例：https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-钩子

new Vue({
  el: '#example-4',
  data: {
    show: false
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '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',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^