vue手写动画效果和animate库的使用

目录

一、利用@keyframes关键帧动画 

二、利用vue原生css样式

三、作用于多个标签时的注意点

四、vue使用第三方库animate.css

五、手写完整代码

---

动画效果在我们平时的页面交互还是蛮重要的，

今天看到的一个小玩意，希望对各位有所帮助。大概效果就是这样 ，让一个盒子从有到无逐渐显示出来

​​​​​​​

---

一、利用@keyframes关键帧动画 

我们在vue中想要实现动画效果可以使用transition这个标签去包裹起来

//html结构
  
<transition name="hello" appear>
      <div class="box"
           v-show="isshow">你好啊</div>
    </transition>

appear	页面一加载就会触发一次动画效果，默认值是false
name	定义的这次动画的名字，我们可以根据这个去设置动画

//css代码，定义关键帧

@keyframes show {
  0% {
    transform: translateX(-100%);
    background-color: rgb(255, 255, 255);
  }
  50% {
    background-color: rgb(163, 240, 132);
  }
  100% {
    transform: translateX(0px);
  }
}

我们可以定义一个关键帧动画去定义一个动画，让他在刚开始的时候是完全在可视范围外，然后逐渐出现

//定义transition的name字段如下：
.hello-enter-active {
  animation: show 1s;
}
.hello-leave-active {
  animation: show 1s reverse;
}


//没有定义transition的name字段如下：
//vue会自动调用这两个css属性，如果没有定义transition的name属性，默认是v-开头
.v-enter-active {
  animation: show 1s;
}
.v-leave-active {
  animation: show 1s reverse;
}

这两个一个是enter进入激活，一个是leave离开激活，只要是被transition包裹的标签就会自动调用这两个css属性,这个transition最后会被vue解析掉，不会出现在html结构中

---

二、利用vue原生css样式

如果我们不使用keyframes而完全使用vue提供给我们的css属性我们也可以使用这套来代替动画

.hello-enter	进入的起点
.hello-leave-to	离开的终点
.hello-enter-to	进入的终点
.hello-leave	离开的起点
.hello-enter-active	进入的整个过程
.hello-leave-active	离开的整个过程

.hello-enter,
.hello-leave-to {
  transform: translateX(-100%);
}
.hello-enter-active,
.hello-leave-active {
  transition: 0.5s linear;
}
.hello-leave,
.hello-enter-to {
  transform: translateX(0);
}

---

三、作用于多个标签时的注意点

如果我们要作用于多个标签的话我们必须使用transition-group进行包裹，并且给每一个标签一个key值

<template>
  <div>
    <button @click="showFn">显示/隐藏</button>
    <transition-group appear>
      <div class="box" key="1"
           v-show="isshow">你好啊1</div>
      <div class="box" key="2"
           v-show="isshow">你好啊2</div>
    </transition-group>
  </div>

</template>

---

四、vue使用第三方库animate.css

animate.css官方文档https://animate.style

• 引入

//npm
$ nom install animate.css --save

//yarn
$ yarn add animate.css

• main.js引入、局部引入

import 'animate.css';

• 使用

 <transition appear
                name="animate__animated animate__bounce"
                enter-active-class="animate__swing"
                leave-active-class="animate__backOutUp">
      <div class="box"
           v-show="isshow">你好啊</div>
    </transition>

使用的时候记得加入  animate__  前缀

---

• 五、手写完整代码

<template>
  <div>
    <button @click="showFn">显示/隐藏</button>
    <transition appear>
      <div class="box"
           v-show="isshow">你好啊</div>
    </transition>
  </div>

</template>

<script>
export default {
  data () {
    return {
      isshow: true
    }
  },
  methods: {
    showFn () {
      console.log(this.isshow);
      this.isshow = !this.isshow
    }
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: rgb(60, 248, 3);
}
.v-enter-active {
  animation: show 1s;
}
.v-leave-active {
  animation: show 1s reverse;
}
@keyframes show {
  0% {
    transform: translateX(-100%);
    background-color: rgb(255, 255, 255);
  }
  50% {
    background-color: rgb(163, 240, 132);
  }
  100% {
    transform: translateX(0px);
  }
}
</style>