Vue系列十：过渡与动画

深碍√TFBOYSˉ_ 2022-01-30 06:19 313阅读 0赞

1.  vue动画的理解  
    操作css的trasition或animation  
    vue会给目标元素添加/移除特定的class
2.  基本过渡动画的编码  
    1). 在目标元素外包裹  
    2). 定义class样式  
    1>. 指定过渡样式: transition  
    2>. 指定隐藏时的样式: opacity/其它
3.  过渡的类名  
    xxx-enter-active: 指定显示的transition  
    xxx-leave-active: 指定隐藏的transition  
    xxx-enter: 指定隐藏时的样式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>过渡&动画1</title>
      <style>
        /*指定过渡样式*/
        .xxx-enter-active, .xxx-leave-active {
          transition: opacity 1s
        }
        /*指定隐藏时的样式*/
        .xxx-enter, .xxx-leave-to {
          opacity: 0;
        }
    
    
        .move-enter-active {
          transition: all 1s
        }
    
        .move-leave-active {
          transition: all 3s
        }
    
        .move-enter, .move-leave-to {
          opacity: 0;
          transform: translateX(20px)
        }
      </style>
    </head>
    <body>
    <div id="demo">
      <button @click="show = !show">Toggle</button>
      <transition name="xxx">
        <p v-show="show">hello</p>
      </transition>
    </div>
    
    <hr>
    <div id="demo2">
      <button @click="show = !show">Toggle2</button>
      <transition name="move">
        <p v-show="show">hello</p>
      </transition>
    </div>
    
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#demo',
        data: {
          show: true
        }
      })
    
      new Vue({
        el: '#demo2',
        data: {
          show: true
        }
      })
    
    </script>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>过渡&动画2</title>
      <style>
        .bounce-enter-active {
          animation: bounce-in .5s;
        }
        .bounce-leave-active {
          animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
          0% {
            transform: scale(0);
          }
          50% {
            transform: scale(1.5);
          }
          100% {
            transform: scale(1);
          }
        }
      </style>
    </head>
    <body>
    
    <div id="example-2">
      <button @click="show = !show">Toggle show</button>
      <br>
      <transition name="bounce">
        <p v-if="show" style="display: inline-block">Lorem</p>
      </transition>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script>
      new Vue({
        el: '#example-2',
        data: {
          show: true
        }
      })
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]: /images/20220130/f51c610d553d470bbc96f86705044b0e.png