Home > Article > Web Front-end > How to implement Vuejs transition animation

How to implement Vuejs transition animation

清浅Original: 2019-01-22 11:28:403534browse

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

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the difference between ExtJS and jQueryNext article：What is the difference between ExtJS and jQuery

See more

How to implement Vuejs transition animation

Related articles