zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    解压缩编码列表
    按既定顺序创建目标数组
    整数的各位积和之差
    好数对的数目
    拿硬币
    设计 Goal 解析器
    【求助】win 2008 R2 远程桌面多用户,破解最大连接数2的限制
    Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次
    Java abstract class 和 interface 的区别
    忘记BIOS超级管理员密码,怎么破解?
  • 原文地址:https://www.cnblogs.com/fengxiongZz/p/8071954.html
Copyright © 2011-2022 走看看