Vue2.0的动画效果

本文只是结合一些代码和图片加强对Vue动画的理解，更多资料请戳这里

 

结合原生CSS实现动画

下面是一张图片，简单清晰明了是吧^-^

 

下面是一段代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .show-enter-active,.show-leave-active{
            transition: all 0.4s ease;
            padding-left: 10px;
        }
        .show-enter,.show-leave-active{
            padding-left: 100px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
        <button @click="toggle">点击隐藏和显示</button>
      <transition name="show">
          <h3 v-show="isshow">{{message}}</h3>
      </transition>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message:"hello Vue!",
          isshow:false
        },
        methods:{
            toggle:function(){
                this.isshow = !this.isshow;
            }
        }
      })
    </script>
  </body>
</html>

 

结合animate.css实现动画

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css" />
    <style>
        .show{
            transition: all 0.4s ease;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
        <button @click="toggle">点击隐藏和显示</button>
      <transition enter-active-class="fadeInRight"
                  leave-active-class="fadeOutRight">
          <div v-show="isshow" class="animated" class="show">{{message}}</div>
      </transition>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message:"hello Vue!",
          isshow:false
        },
        methods:{
            toggle:function(){
                this.isshow = !this.isshow;
            }
        }
      })
    </script>
  </body>
</html>

 

使用钩子函数实现动画效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .show{
            transition: all 0.4s ease;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
        <button @click="toggle">点击隐藏和显示</button>
            <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                <div v-show="isshow" class="show">{{message}}</div>
            </transition>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: {
          message:"hello Vue!",
          isshow:false
        },
        methods:{
            toggle:function(){
                this.isshow = !this.isshow;
            },
            beforeEnter:function(el){
                //定义当前实现动画的初始位置
                el.style.transform = "translate(100px,0)";
            },
            enter:function(el,done){
                //设置一下刷新状态
                el.offsetWidth;
                //设置动画的结束位置
                el.style.transform = "translate(0px,0)";
                //手动调用一下done方法，由这个方法去决定动画是否结束了
                //否则动画的消失会有延迟
                done();
            },
            afterEnter:function(el){
                //将动画的状态复原设置
                this.isshow = !this.isshow;
            }
        }
      })
    </script>
  </body>
</html>

 

posted @ 2017-12-20 07:43  Z皓  阅读(2971)  评论(0)  编辑  收藏  举报