一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。

前言

在前面三章的文章中，我们了解了vue的指令、方法、生命周期函数、组件的定义、组件的通信等。本章的内容主要就是讲解vue里面对CSS动画效果的一个处理，并在后面的章节中用一个实例来带着大家一起学习。

在vue里面对于这种过渡和动画效果是有专门的标签和写法去实现的，但是为了让大家更加深入的了解动画效果，本篇文章主要是根据CSS去讲解一个基础动画的内容。

在后面的文章中，会逐渐深入的去了解vue里面的动画标签，并且会根据标签去做切换效果、列表动画等实例。

动画

在CSS里面会在样式中使用animation来定义动画效果，然后在DOM元素上通过class中的类名和样式匹配，从而实现一个动画效果。

前面的文章中，我们有学过动态样式的内容，可以通过v-bind指令在class或者style上绑定样式数据值来动态显示当前标签的样式内容。

首先我们需要在style中标签中定义动画样式

<style>
    @keyframes laftToRight{
      0% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-50px);
      }
      0% {
        transform: translateX(0px);
      }
    }
    .animation {
      animation: laftToRight 3s;
    }
  </style>

然后在组件标签中定义class绑定animate对象，通过animate中的animation来判断是否显示动画效果

<script>
  const app = Vue.createApp({
    data(){
      return {
        animate: {
          animation: true
        }
      }
    },
    template: `
      <div>
        <div :class="animate">Hello World</div>
      </div>
    `
  });

  const vm = app.mount('#root');

</script>

chrome-capture (13).gif

我们可以在模板中添加一个按钮，通过改变animation的数据值从而控制动画执行效果。

const app = Vue.createApp({
    data(){
      return {
        animate: {
          animation: true
        }
      }
    },
    methods: {
      handleClick(){
        this.animate.animation = !this.animate.animation
      }
    },
    template: `
      <div>
        <div :class="animate">Hello World</div>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

Kapture 2022-04-22 at 20.38.44.gif

通过点击按钮事件，可以看到浏览器控制台中的class标签中的值会改变。

过渡

知道了动画效果的写法之后，只需要简单改造一下样式和事件逻辑就可以写出过渡效果咯~~

首先在style标签中定义transition的样式，做一个背景渐变色的过渡效果

.transition{
  transition: 3s background-color ease;
}

.red{
  background-color: red;
}

.green{
  background-color: green;
}

然后在data函数中定义数据值对象，将transition置为true，比如我们需要默认是red，改变之后是green，那么就将对应的class值设为true或false

data(){
  return {
    animate: {
      transition: true,
      red: true,
      green: false
    }
  }
},

最后我们在点击事件的方法中，将red和green做一个取反的效果，就可以实现背景渐变色了。

methods: {
  handleClick(){
    this.animate.red = !this.animate.red
    this.animate.green = !this.animate.green
  }
},

Kapture 2022-04-22 at 20.52.03.gif

在浏览器中可以看出渐变色效果已经实现了，而且DOM元素中的class也会随着点击事件修改样式名。

总结

本篇文章主要就是讲解了CSS过渡和动画的基础效果，主要还是通过改变class的样式名来控制效果的显隐，当然也可以把class改成style去实现，有兴趣的朋友可以自己根据以前的内容尝试一下哦~~~

【Vue3从零开始-第四章】4-1 CSS过渡与动画基础效果

前言

动画

过渡

总结