Vue handwriting animation effect and use of animate library

Table of contents

3. Points to note when acting on multiple labels

4. Vue uses the third-party library animate.css

Animation effects are still very important in our usual page interaction.

I saw a little gadget today, I hope it can help you. Probably the effect is like this, so that a box is gradually displayed from presence to absence

1. Use @keyframes key frame animation

If we want to achieve animation effects in vue, we can use the transition tag to wrap it up

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

appear	An animation effect will be triggered as soon as the page loads, the default value is false
name	The defined name of this animation, we can set the animation according to this

//css代码，定义关键帧

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

We can define a keyframe animation to define an animation so that it is completely outside the visible range at the beginning, and then gradually appears

//定义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;
}

One of these two is enter to activate, and the other is to leave to activate. As long as the label wrapped by transition will automatically call these two css attributes, this transition will be parsed by Vue in the end and will not appear in the HTML structure.

2. Use vue native css style

If we don't use keyframes and fully use the css properties provided by vue, we can also use this set instead of animation

.hello-enter	entry point
.hello-leave-to	end of departure
.hello-enter-to	entry point
.hello-leave	departure point
.hello-enter-active	the whole process of entering
.hello-leave-active	the whole process of leaving

.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);
}

3. Points to note when acting on multiple labels

If we want to act on multiple tags, we must use transition-group to wrap and give each tag a key value

<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>

4. Vue uses the third-party library animate.css

animate.css official documentation https://animate.style

introduce

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

//yarn
$ yarn add animate.css

main.js import, partial import

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>

Remember to add animate__ prefix when using

Five, hand-written complete code

<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>