Preface:Recently, I am writing a project that I want to achieve transitional effects. Although vue animation is not a strong point and there are many libraries, I still have to go through the basic pitfalls;
suggestion:Learn the official vue documentation firstEnter/Leave & List TransitionChapter, let’s look at the bug;
First, the code that appears the problem
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.haha-leave-active {
transition: opacity .5s;
}
.haha-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
#demo{
position: relative;
width: 200px;
height: 200px;
margin: auto;
top: 100px;
}
.bug{
position: relative;
opacity: 1;
}
</style>
<script src="/vue/dist/"></script>
<script src="/vue-router/dist/"></script>
</head>
<body>
<div >
<button v-on:click="show = !show">Click</button>
<transition name="haha">
<div class="bug" v-if="show">Hello</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
</body>
</html>
The above code really looks like there is no problem, but copying and pasting finds how the transition becomes a delay. Read the official document carefully and find the difference, read it repeatedly;
The attribute we want to overdo is opacity. Compared with the official document, we add an additional opacity property value of 1 in the div we want to transition. This leads to the fact that the opacity value is 1 in the entire animation process without a transition from 1 to 0 in the animation;
The root cause of this problem is because of the css priority problem. The css priority of the div is much greater than the priority of the css attribute in the animation.Therefore, the value of opacity is always the value in the div and there is no transition change;
Then one of the solutions is of course to remove the value of the opacitry in the div, so that only the opacitry in the animation exists to realize the animation;
However, when the attributes in the div need to exist and we need transition animation, we need!important, the great god of css to change the priority of css;!important is to make the current priority of css reach the highest, of course, the important one is the lowest priority;
Come on! The correct code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.haha-leave-active {
transition: opacity .5s;
}
.haha-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
#demo{
position: relative;
width: 200px;
height: 200px;
margin: auto;
top: 100px;
}
.bug{
position: relative;
opacity: 1 important;
}
</style>
<script src="/vue/dist/"></script>
<script src="/vue-router/dist/"></script>
</head>
<body>
<div >
<button v-on:click="show = !show">Click</button>
<transition name="haha">
<div class="bug" v-if="show">Hello</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
</body>
</html>
This will not only achieve the transition effect but also remove the css attributes with higher priority in the div
The above article solves the problem that the transition animation of vue cannot be implemented normally is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.