VUE3 之动画与过渡的实现 - 这个系列的教程通俗易懂，适...

admin · 发表于 2022-2-18 21:28:53

1. 概述

光环效应告诉我们：

当一个人在某一方面取得了巨大的成功，人们就会给他贴上正面的标签，这个人从此就被“优秀”的光环所笼罩，他做的一切，人们都认为是正确的。

例如：越是名气大的明星代言的商品，买的人就越多。

反之亦然，当一个人在某一方面失败了，往往就会被贴上负面的标签，从此被“失败”的“光环”所笼罩，他做的一切，周围人都认为是错误的。

例如：一个人第一次做生意就失败了，则这个人再做什么决策，他的朋友都认为是错误的。

因此，我们要理性判断，不能被“光环”影响我们的判断。

言归正传，今天我们来聊聊 VUE 的动画与过渡。

2.动画与过渡

2.1 基于 class 的动画
[mw_shl_code=applescript,true]<style>
      /* 动画 */
      @keyframes leftRight {
         0% {
            transform: translateX(0px);
         }
         33% {
            transform: translateX(-100px);
         }
         66% {
            transform: translateX(100px);
         }
         100% {
            transform: translateX(0px);
         }
      }

      .animation_leftRight {
         animation : leftRight 4s;
      }
      .center {
         text-align: center;
      }
</style>[/mw_shl_code]
[mw_shl_code=applescript,true]<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({
      data(){
         return {
            animate : {
                  animation_leftRight : false
            }
         }
      },
      methods : {
         handleClick() {
            this.animate.animation_leftRight = !this.animate.animation_leftRight;
         }
      },
      template:`
         <div class="center">
            <div :class="animate">hello world</div>
            <button @click="handleClick">左右移动</button>
         </div>

      `
});
const vm = app.mount("#myDiv");
</script>[/mw_shl_code]

这个例子中，我们让 hello world 这段文字，在 4 秒钟的时间里，先向左移动，再向右移动，最后回到中间。

利用我们之前学的绑定 class 的方法，使用 :class="animate" 将 class 样式与数据绑定，最终实现效果。

2.2 基于 class 的过渡
[mw_shl_code=applescript,true]<style>
      /* 过渡 */
      .transition {
         transition : 3s background-color ease;
      }

      .blue {
         background : blue;
      }

      .green {
         background : green;
      }
</style>[/mw_shl_code]
[mw_shl_code=applescript,true]const app = Vue.createApp({
      data(){
         return {
            transition : {
                  transition : true,
                  blue : true,
                  green : false
            }
         }
      },
      methods : {
         handleClick() {
            this.transition.blue = !this.transition.blue;
            this.transition.green = !this.transition.green;
         }
      },
      template:`
         <div>
            <div :class="transition">hello world</div>
         </div>
         <button @click="handleClick">切换</button>
      `
});[/mw_shl_code]

该例中，我们将 hello world 的背景色，由蓝色渐变成绿色，同样是使用了 :class 绑定数据的方式。

2.3 过渡与 Style 的绑定
[mw_shl_code=applescript,true]const app = Vue.createApp({
      data(){
         return {
            styleObj : {
                  background : 'blue'
            }
         }
      },
      methods : {
         handleClick() {
            if(this.styleObj.background === 'blue') {
                  this.styleObj.background = 'green';
            } else {
                  this.styleObj.background = 'blue';
            }

         }
      },
      template:`
         <div>
            <div class="transition" :style="styleObj">hello world</div>
         </div>
         <button @click="handleClick">切换</button>
      `
});[/mw_shl_code]
此例与上例的效果相同，只是使用 :style 的方式与数据绑定。

		自动登录	找回密码
密码			立即注册

VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂，适...

相关帖子

VUE3 之动画与过渡的实现 - 这个系列的教程通俗易懂，适...