Table of contents
1. The transition component in vue
Second, the transition component applies CSS transitions
(1) Number of units/component transition
(2) Multiple element transitions
(3) Multiple component transitions
foreword
Our vue five-minute series is very long. It is a series of articles and blogs. Every day, we will update what we have learned. If you are interested, you can like and follow. We will learn together. The blogger just records each part. Summarize the knowledge you have learned. If you don’t like it, don’t spray it. It’s not easy to summarize. There are many related vues at station C that are just summaries.
Well, we can now learn about the transition of Vue. Vue provides many different transition effects when inserting, updating and removing DOM elements. If you automatically apply classes in CSS transitions, you can use JavaScript in the transition hook function to directly Just manipulate the DOM.
1. The transition component in vue
Vue provides this transition component, which can add entry or exit element transitions to any element and component during v-if conditional rendering, v-show conditional display, and dynamic components.
Second, the transition component applies CSS transitions
When applying CSS transitions, the transition component adds and removes elements at the appropriate time. Our transition component contains the following 6 transition categories;
- v-enter: Defines that when entering the transition, the element takes effect before insertion, and overflows the next frame after the element is inserted.
- v-enter-active: at the time of definition, in the state where the transition is in effect, applied throughout the entry transition phase, effective before the element is inserted, and removed after the transition is complete.
- v-enter-to: Defines the end state of entering the transition, which takes effect in the next frame after the element is inserted, and is removed after the transition is complete.
- v-leave: Defines the start state of the leave transition. It takes effect immediately when the leave transition is triggered, and the next frame will be moved out.
- v-leave-active: The state when the transition defining leave is active.
- v-leave-to: Defines the end state of the leave transition.
Of the six transition classes we have summarized, the first three are transition classes, and the last three are transition classes. In the process of entering or leaving, the six transition classes are switched to each other.
(1) Number of units/component transition
Only one element is included in the transition component, and the transition is defined when this element is inserted or deleted. We can take a look at it with a single line of code:
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>动态</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="guodu" id="game"/>
<label for="game">我已经知晓未成年人游戏时间公告</label>
<transition name="fade">
<p v-if="guodu"><button>开始游戏</button></p>
</transition>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{guodu:false}
});
</script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 2s;
}
</style>
</body>
</html>Running result: We can see but click to select the check box of "I have been aware of the announcement of the game time of the king's minors", and then our "Start Game" will fade out on the page, but when we uncheck it , "Start Game" will fade out of our page.
Because our component is set with name="fade", then we can use the prefix of fade when defining the style, such as .fade-enter in the code, etc. After the style is defined, there is no need to manually introduce it, transition Components can add and remove elements of our "Start Game" button just right.
(2) Multiple element transitions
The transition component contains multiple elements that define transitions when inserted or deleted. Let's take a look at the code. We don't need to modify it, and other codes do not need to be modified. We only need to modify it in the previous chapter of the single element part.
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>动态</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="DGguodu" id="game"/>
<label for="game">我已经知晓未成年人游戏时间公告</label>
<transition name="fade" appear mode="out-in">
<p v-if="DGguodu" key="1"><button>开始游戏</button></p>
<p v-else key="2">先阅读公告后进行游戏</p>
</transition>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{DGguodu:false}
});
</script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 2s;
}
</style>
</body>
</html>operation result:
When we see the above results, we can understand why the above results occur, because we set the transition to the appear mode attribute, which is used to set the node to apply the transition effect when it is initially rendered. When we select the reuse box, the paragraph "Read first..." will fade out, and "Start the game" will fade in. This is because we set the mode to out-in, and the mode property is used to set the transition mode.
(3) Multiple component transitions
The transition of multiple components is simpler than the transition of multiple elements, because it does not use the key attribute when the element transitions, and only needs to use dynamic components. Let's take a deeper look at the results of the example code:
Example code:
(4) List transition
The list transition uses the transition-group component. Different from the transition component, the transition-group component contains more attributes, such as: the mode attribute is unavailable, only one key attribute can be contained inside, and the css transition will be smooth Will be applied to internal elements and rendered as a real element. Let's take a look at this list transition through code:
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>列表过渡</title>
</head>
<body>
<div id="app">
<h1>2022届大学生新生入学登记：</h1>
<form>
<p><label for="name">姓名：</label>
<input type="text" v-model="stuInfo.name" id="name"></p>
<p><label for="xuehao">学号:</label>
<input type="xuehao" v-model="stuInfo.xuehao" id="xuehao"></p>
<p><button @click="add" type="button">添加</button></p>
</form>
<transition-group tag="ul" name="fade">
<li v-for="(item,index) in students" :key="item.xuehao">{
{index+1}}--{
{item.name}}--{
{item.xuehao}}<button @click="del(index)">删除</button>
</li>
</transition-group>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
stuInfo:{xuehao:" "},
students:[]
},
methods:{
add(){
this.students.push(this.stuInfo);
this.stuInfo={};
},
del(index){this.students.splice(index,1);}
}
});
</script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
transform: translateX(100px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 2s;
}
</style>
</body>
</html>operation result:
We have set the component of -group to tag='ul' here, so that the attribute value of xuehao in the key attribute value data of each list item li element ensures that its attribute value is a unique attribute. The results are as above, the effect is not much to say, everyone can watch.
3. JavaScript hooks
The JavaScript hook function can be bound using the v-on instruction in the transition component. The transition cycle can have the following hook functions:
<transition v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterenter"
v-on:enter-cancelled="entercanclled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
</transition>Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>钩子函数实现动画</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="already" id="ck"/>
<label for="ck">我已经阅读了相关的报名需求</label>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="after-enter"
>
<p class="show" v-if="already"><button>确定报名</button></p></transition>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
already:false
},
methods:{
beforeEnter:function(el){
el.style="opacity:0";console.log("beforeEnter");
},
enter:function(el,done) {
el.offsetHeight;
el.style = "opacity:1";
console.log("enter");
done();
},
afterEnter:function(el){
console.log("afterEnter");
}
}
});
</script>
<style>
.show {
transition: all 2s;
}
</style>
</body>
</html>operation result:
We can see that when we click the check box, "Confirm Registration" will be displayed slowly, and unchecking it will not fade out!