Build a transition and animation code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
@keyframes comein {
0% {
transform: translateX(-120px)
}
100% {
transform: translateX(0px)
}
}
@keyframes comeout {
0% {
transform: translateX(0px)
}
100% {
transform: translateX(-120px)
}
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
.v-enter-active {
animation: comein 3s;
transition: opacity 3s ease-out;
}
.v-leave-active {
animation: comeout 3s;
transition: opacity 3s ease-out;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
isShow: false
}
},
methods: {
hanldClick() {
this.isShow = !this.isShow
}
},
template: `
<transition>
<div v-if="isShow">willem</div>
</transition>
<button @click="hanldClick">Toggle animation</button>
`
})
const vm = app.mount("#app")
</script>
For viewing convenience, the transition and animation time are changed to 3 seconds. Then view it in the browser. You can see that the transition and animation are very normal at this time.
Handling of inconsistent transition and animation duration
Sometimes the transition time is not consistent with the animation time. For example, the transition time is 7 seconds, and the animation time is 3 seconds.
You may not feel a Bug when entering the animation, but there will be serious problems when entering the animation.
After the animation, in order to show the transition effect, the element returns to the page until the transition is over.
To solve this problem, you can add the type='animation 'attribute on the < transition > tag, which means that the animation ends and the whole process ends regardless of the transition time.
template: `
<transition type="animation">
<div v-if="isShow">willem</div>
</transition>
<button @click="hanldClick">Toggle animation</button>
`
Of course, you can also increase the animation time to 7 seconds, and then adjust the transition to 3 seconds. At this time, you can use the type='transition 'attribute to avoid bugs.
Now it means that the transition is over and the animation is over based on the transition time. Let's see the effect.
.v-enter-active {
animation: comein 7s;
transition: opacity 3s ease-out;
}
.v-leave-active {
animation: comeout 7s;
transition: opacity 3s ease-out;
}
The template is modified as follows:
template: `
<transition type="transition">
<div v-if="isShow">willem</div>
</transition>
<button @click="hanldClick">Toggle animation</button>
`
At this point, the transition ends and the animation ends. However, it seems unnatural at this time, because the sub has not reached the position it should go. As a result, when the animation is over, there will be frame skipping.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
@keyframes comein {
0% {
transform: translateX(-120px)
}
100% {
transform: translateX(0px)
}
}
@keyframes comeout {
0% {
transform: translateX(0px)
}
100% {
transform: translateX(-120px)
}
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
.v-enter-active {
animation: comein 7s;
transition: opacity 3s ease-out;
}
.v-leave-active {
animation: comeout 7s;
transition: opacity 3s ease-out;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
isShow: false
}
},
methods: {
hanldClick() {
this.isShow = !this.isShow
}
},
template: `
<transition type="transition">
<div v-if="isShow">willem</div>
</transition>
<button @click="hanldClick">Toggle animation</button>
`
})
const vm = app.mount("#app")
</script>
Attributes control animation and transition duration
Another situation is that we don't care about the animation and transition time in CSS, and the label shall prevail. You can bind the attribute < transition: duration = "1000" > to control the duration, which means that the animation and transition will end after 1 second.
Note that 1000 here means milliseconds, that is, 1 second.
template: `
<transition :duration="1000">
<div v-if="isShow">willem</div>
</transition>
<button @click="hanldClick">Toggle animation</button>
`
At this time, check in the browser. You can see that the transition and animation for 1 second have not been completed, but they have stopped.
In addition to writing a number, duration can also write objects. For example, it can be written in 1 second when entering the site and 3 seconds when leaving the factory.
<transition :duration="{enter:1000,leave:3000}">
These are some control options and precautions when animation and transition are used at the same time.
In the next section, we'll learn how to use JavaScript with Vue3 to make animation.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
@keyframes comein {
0% {
transform: translateX(-120px)
}
100% {
transform: translateX(0px)
}
}
@keyframes comeout {
0% {
transform: translateX(0px)
}
100% {
transform: translateX(-120px)
}
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
.v-enter-active {
animation: comein 7s;
transition: opacity 3s ease-out;
}
.v-leave-active {
animation: comeout 7s;
transition: opacity 3s ease-out;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
isShow: false
}
},
methods: {
hanldClick() {
this.isShow = !this.isShow
}
},
template: `
<transition :duration="{enter:1000,leave:3000}">
<div v-if="isShow">willem</div>
</transition>
<button @click="hanldClick">Toggle animation</button>
`
})
const vm = app.mount("#app")
</script>
</html>