How to implement CSS transition effect using vue

This article mainly introduces the CSS transition effect example of web front-end vue. Now I will share it with you and give you a reference.

The importance of transition effects in interactive experience is self-evident. In the past, we used js or Jquery to add or remove the class of elements, combined with the styles defined in CSS, and after referencing some javascript libraries, we could create very complex and stunning dynamic effects. However, this method is still too cumbersome. .

vue.js has a built-in transition system that can automatically apply transition effects when elements are inserted or removed from the DOM. Vue will trigger css transition or animation at the right time. You can also provide corresponding javascript hook functions to perform custom DOM operations during the transition process.

Every transition effect needs to use the transition attribute on the target element.

<p v-if="show" transition="my-style">显示</p>

The characteristics of transition can be used together with the following instructions:

1.v-if 2.v-show 3.v-for 4.Dynamic component

Also There are other instructions or resources that you can find by yourself.

The complete code example is as follows:

<p v-if="show" :transition="expand"></p>  // expand必需事先定义好，expand后面写样式要用（关键）
<transition name="expand"><p v-if="show">显示</p></transition>这样的嵌套也可以

.expand-transition { // 必需写
 transition: all .3s ease; 
 height: 30px; 
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}

.expand-enter{ //开始进入过渡，元素被插入生效
 transition:opacity .5s;
} 
.fade-leave-active { // 结束状态
 opacity:0;
}

Of course there is a beginning and there must be an end state. It actually has four (CSS class) names that switch between the enter/leave states.

1.v-enter: Defines the starting state of the transition, takes effect when the element is inserted, and is removed in the next frame

2.v-enter-active: Defines the entry state of the transition The end state takes effect when the element is inserted, and is removed after the transition/animation is completed

3.v-leave: Defines the start state of the leaving transition, takes effect when the leaving transition is triggered, and moves in the next frame Except

4.v-leave-active: Define the start state of the leave transition, which takes effect when the leave transition is triggered, and is removed in the next frame

According to the above four states, it can be completed Write a CSS transition effect, such as the page sliding into the field from the left side of the window. Isn't this cool?

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to build element-ui (detailed tutorial)

How to define your own based on ng-alain in angular select component?

How to modify the default style in elementui

Use elementUI to implement custom theme methods in Vue

Detailed interpretation of plotly.js drawing library usage tutorial (detailed tutorial)

How to modify the default style in elementui?

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