Vue2中使用过度动画效果案例

旧梦星轨

已于 2022-12-28 20:04:26 修改

阅读量341

点赞数 2

分类专栏： Vue2 文章标签： vue.js javascript 前端框架

于 2022-09-12 17:11:51 首次发布

本文链接：https://blog.csdn.net/qq_60961397/article/details/126819251

版权

Vue2 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

在vue中提供了一套自己的动画过度配置。并且提供了一个新的标签 transition 并且提供一个name属性，用作类名前缀，在vue中，还提供了6个class后缀名：
-leave（动画移除前），-leave-active（动画移除中）,-leave-to( 动画移除后)，-enter（“动画挂载前”）,-enter-active(“动画挂载中”)，-enter-to（“ 动画挂载后”），通过自定义name属性前缀拼接书写，vue会自动匹配在不同阶段为节点挂载不同的class类名。
更多见此处官网
在这里插入图片描述

    <style>
      img {
        width: 200px;
        height: 200px;
      }
      /* 动画移除前 */
      .Pictureswitching-leave {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
      /* 动画移除中*/
      .Pictureswitching-leave-active {
        transition: 1s all linear;
      }
      /* 动画移除后 */
      .Pictureswitching-leave-to {
        opacity: 0;
        transform: scale(0.2) rotate(180deg);
      }
      /* 动画挂载前 */
      .Pictureswitching-enter {
        opacity: 0;
        transform: scale(0.2) rotate(180deg);
      }
      /* 动画挂载中*/
      .Pictureswitching-enter-active {
        transition: 1s all linear;
      }
      /* 动画挂载后 */
      .Pictureswitching-enter-to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    </style>
  </head>
  <script src="./vue.js"></script>
  <div id="root">
    <button @click="addnum">点击切换</button><br />
    <transition name="Pictureswitching">
      <img
        v-show="switchs"
        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/955af46e136ff737e647c5922ba56580.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160"
        alt=""
      />
    </transition>
  </div>

  <body>
    <script>
      const vm = new Vue({
        // el: "#root",
        data() {
          return {
            switchs: true,
          };
        },
        methods: {
          addnum() {
            this.switchs = !this.switchs;
          },
        }
      });
      vm.$mount("#root");
    </script>
  </body>