This article examples for everyone to share the Vue gradual transition effect, for everyone to refer to, the specific contents as follows, for your reference, the specific contents are as follows
Transition with V-for You can create an asymptotic transition. Add an attribute to a transition element Stagger,enter-stagger or Leave-stagger:
<div v-for= "Item in List" transition= "Stagger" stagger= "></div>"
Alternatively, provide a hook stagger, enter-stagger or Leave-stagger to better control:
Vue.transition (' Stagger ', {
stagger:function (index) {
//per Transition project increases 50MS delay
//But maximum latency limit is 300ms
return Math.min (EUR, Index *)
}
)
Example: HTML code:
<div id= "Demo" >
<input v-model= "Query" >
<ul>
<li v-for= "Item in List | filterby Query "
transition=" staggered "
stagger=" > {{
item.msg}}
</li>
</ul>
</div>
JS Code:
New Vue ({
el: ' #demo ',
data: {
query: ',
list: [
msg: ' Bruce Lee '},
{msg: ' Jackie Chan '},
{msg: ' Chuck Norris '},
{msg: ' Jet Li '},
{msg: ' Kung Fury '}
}
}
CSS code:
UL {
padding-left:0;
Font-family:helvetica, Arial, Sans-serif;
staggered-transition {
transition:all. 5s ease;
Overflow:hidden;
margin:0;
height:20px
}
. Staggered-enter,. staggered-leave {
opacity:0;
height:0;
}
The effect of the following figure:
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.