How to implement Vuejs transition animation-JS Tutorial-php.cn

How to implement Vuejs transition animation

清浅

Release： 2019-01-22 11:28:40

Original

3560 people have browsed it

Transition animation can be achieved through the transition element in vuejs. It has six classes that can be applied to tags to handle entering and leaving transitions respectively.

VueJS (Vue.js) can be said to be a very good front-end Javascript framework. It's easy to use, extend and customize to suit our needs. Especially the transition feature in vue.js, which makes the animation process a breeze. Next, in the article, we will introduce in detail how to implement vue.js transition animation. It has certain reference value and I hope it will be helpful to everyone

How to implement Vuejs transition animation

[Recommended course: vue.js tutorial]

There is a element in Vue.js which makes it easy to handle JavaScript animations, CSS animations and CSS transitions on elements or components

In the case of CSS transitions, element is responsible for applying and unapplying classes. All we have to do is define how the element will look during transition

The syntax is as follows:

<transition name = "nameoftransition">
   <div></div>
</transition>

Copy after login

Transition elements apply six classes to your markup, you You can use them to handle your entry and exit transitions separately. There are three classes that handle the conversion from A to B when the element is displayed, and three classes that handle the conversion from A to B when the element is removed.

Input transitions occur when a component is enabled or displayed: v-enter, v-enter-active, v-enter-to

v-enter: Indicates entry transition the starting state. Removed at the next frame after the element is inserted

v-enter-active: Indicates the state when the transition is in effect, removed after the animation is completed

v-enter-to:Enter the transition The end state, removed after the animation completes

The leave transition is when the component is disabled or removed: v-leave, v-leave-active, and v-leave-to

v-leave: Indicates the starting state of the leaving transition, and will be removed in the next frame

v-leave-active: Indicates the state when the leaving transition takes effect, throughout the entire leaving transition phase Applied in, removed after transition/animation completes. This class can be used to define the process time, delay and curve function of the leaving transition

v-leave-to: Represents the end state of the leaving transition, removed after the transition/animation is completed

How to implement Vuejs transition animation

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<script src="https://vuejs.org/js/vue.js"></script>

<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .5s ease;
}
.slide-fade-leave-active {
  transition: all 3s linear;
  font-size:30px;
  background-color: pink;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
  transform: translateX(40px);
  opacity:0.2;
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name="slide-fade">
    <p v-if="show">php中文网</p><!-- 为true就显示，不是true就不显示 -->
</transition>
</div>
<script type = "text/javascript">
new Vue({
    el: &#39;#databinding&#39;,
    data: {
        show: true
    }
})
</script>
</body>
</html>

Copy after login

Rendering:

How to implement Vuejs transition animation

##Summary: The above is the entire content of this article , I hope this article can help everyone learn to create transition animations with vue.js

The above is the detailed content of How to implement Vuejs transition animation. For more information, please follow other related articles on the PHP Chinese website!