A brief analysis of how vue achieves animation effects

How does vue achieve animation effects? The following article will give you a brief understanding of transitions and animations encapsulated in Vue. I hope it will be helpful to you!

Vue encapsulated transition and animation

1. Function

When inserting, updating, or removing DOM elements, add style class names to the elements when appropriate.

2. Writing method

Prepare the style: the style of the element entry

<template>
  <div>
    <button @click="isShow = !isShow">隐藏展示</button>
    <transition name="hidden" appear>
      <h1 v-show="isShow">隐藏展示</h1>
    </transition>
  </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true
    };
  }
};
</script>
<style scoped>
h1 {
  background-color: orange;
}
.hidden-enter-active {
  animation: shanyu 1s;
}
.hidden-leave-active {
  animation: shanyu 1s reverse;
}
@keyframes shanyu {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

[Related recommendations: vuejs Video tutorial、web front-end development】

3. Style

You need to have this animate.css first Oh

npm i animate.css

                                     

1.v-enter: the starting point of entry

2.v-enter-active: in the process of entry

3 .v-enter-to: End point of entry

<template>
  <div>
    <button @click="isShow = !isShow">隐藏展示</button>
    <transition-group name="shanyu" appear>
      <h1 v-show="isShow" key = &#39;1&#39;>隐藏展示</h1>
      <h1 v-show="isShow" key = &#39;2&#39;>隐藏展示</h1>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: "Test2",
  data() {
    return {
      isShow: true
    };
  }
};
</script>
<style scoped>
h1 {
  background-color: rgb(139, 37, 255);
}
/* 进入的起点，离开的起点 */
.shanyu-enter,
.shanyu-leave-to {
  transform: translateX(-100%);
}
.shanyu-enter-active,.shanyu-leave-active{
  transition: .5s linear;
}
/* 进入的终点离开的终点 */
.shanyu-enter-to,
.shanyu-leave {
  transform: translateX(0);
}
</style>

Style of element leaving:

1.V-leave: Starting point of departure

2.V-leave-active : During the process of leaving

3.V-leave-to: The end point of leaving

4. Use to wrap the element to be transitioned, and configure the name attribute

<transitionname="hello">
    <h1v-show=" isShow">你好啊! </h1>
</transition>

Note: If there are multiple elements that need to be transitioned, you need to use: , and each element must specify a key value.

    <transition-group name="shanyu" appear>
      <h1 v-show="isShow" key = &#39;1&#39;>隐藏展示</h1>
      <h1 v-show="isShow" key = &#39;2&#39;>隐藏展示</h1>
    </transition-group>

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of A brief analysis of how vue achieves animation effects. For more information, please follow other related articles on the PHP Chinese website!