Vue中使⽤transition或transition-group标签实现动画效果 Vue中使⽤transition或transition-group标签实现动画效果
transition和transition-group是Vue官⽅提供的两个内置组件，他们会检测所有⼦节点的插⼊和移除，依次在这些属性作⽤的各个阶段抛出钩⼦函数接受我们定义的动画或者第三⽅库⾥的动画然后再把每个阶段的动画重新拼接成⼀个完整的动画效果。利⽤这两个内置组件可以实现⼀些简单的动画效果。本⽂针对transition和transition-group实现动画效果以例⼦的形式做简要介绍。
1、transition动画：
例⼦效果图：
点击“开“或”收“三个圆会⾃动展开或收起。
核⼼代码：
<button @click="showMenu"class="btn">{{text}}</button>
<transition name="move">
<div class="menu"v-show="show">
<div class="inner inner-1"></div>
<div class="inner inner-2"></div>
<div class="inner inner-3"></div>
</div>
</transition>
data(){
return{
show:false
}
},
methods:{
showMenu(){
this.show =!this.show
}
},
computed:{
text(){
return this.show ?'收':'开'
}
}
主思想：
在进⼊/离开的过渡中，vue提供了6个class切换，通过点击事件，类名会对应变化，我们修改对应类名的样式即可达到我们想要的动画效果。值得注意的是如果在中没有定义name，则v-是这些类名的默认前缀，若定义了name，则name-是这些类名的默认前缀。 .menu {
position : fixed ;
bottom : 50px ;
right : 10px ;
width : 50px ;
强调结构
height : 50px ;
border-radius : 50%;
transition : all .7s ease-in ;
&.move-enter-active {
.inner {
transform : translate3d (0, 0, 0);
transition-timing-function : cubic-bezier (0, .57, .44, 1.97)}
.inner-1{
transition-delay : .1s }
.inner-2{
transition-delay : .2s }
.inner-3{
transition-delay : .3s }
}
&.move-enter, &.move-leave-active {
.inner {
transition-timing-function : ease-in-out }
.
inner-1{
transform : translate3d (0, 60px , 0);
transition-delay : .3s }
.inner-2{
transform : translate3d (40px , 40px , 0);
transition-delay : .2s }
.inner-3{
transform : translate3d (60px , 0, 0);
transition-delay : .1s }
}
.inner {
display : inline-block ;
position : absolute ;
width : 30px ;
height : 30px ;
line-height : 30px ;
border-radius : 50%;
background : #1d1d1b ;
z-index : -1;
text-align : center ;
color : #fff ;
pdp激活
transition : all .4s }
.
inner-1{
top : -40px ;
left : 10px }
.inner-2{
left : -30px ;
top : -30px }
.inner-3{
left : -40px ;
top : 10px }
}
2、transition-group动画：
在某些场景下我们希望在v-for的循环中使⽤动画效果，这时transition-group标签就排上了⽤场。transition-group的⽤法和transition基本⼀致，不同的是如果⽤到v-for则需要使⽤transition-group，并且每个 transition-group 的⼦节点必须有独⽴的 key，动画才能正常⼯作。
例⼦效果图：
在刷新页⾯后页⾯会依次显⽰1-4，当点击加号时，会在下⽅逐渐出现后续的数字和⽅块。
核⼼代码：
<div class="app">
<button @click="add"class="add-btn">+</button>
<transition-group name="slide"tag="ul"class="list-wrapper"appear>
<li class="list"v-for="(item) in lists":key="item">
<span class="text">{{item}}</span>
</li>
</transition-group>
</div>
主思想：
在⾥加了appear属性，他会让初次加载的时候⾃动加载动画。这⾥加了⼀个定时器控制数组的变化，否则整个列表都会⼀起显⽰出来，⽽不是逐条显⽰。通过上⾯这个例⼦希望可以给⼤家在后续做⼀些动画的时候提供新的思路。
3、⼩结：
对于transition或transition-group标签实现动画除了本⽂中提到的6个过渡类名，还有⼀些事件⽐如enter、leave、appear等来绑定函数从⽽来实现更加精细的动画效果。transition 实现动画的思路是通过某种⼿段⽐如v-if来触发不同的过渡效果来显⽰不同的动画。⽽transition-group实现动画思路是将⼀个完整的动画拆分成在每个阶段，然后在编译阶段重新拼接为⼀个完整的动画。transition和
transition-group实现简单动画效果时⽐较⽅便，但是在实现复杂动画时，⽐如循环嵌套循环时会出现⽐如抖动等奇怪的效果，所以如果⾯对⽐较复杂的动画效果时可以另辟蹊径选择其他的实现⽅式。
ps：有⼤佬可以帮忙看下为什么循环嵌套transition-group的循环会出现奇怪的抖动吗？附上主要代码：data
() {
return {
lists : []
}
},
methods : {
add () {
this .lists .
push (this .lists .length + 1)
},
test () {
tiedaobu
const temp = setInterval (() => {
this .lists .push (this .lists .length + 1)
if (this .lists .length > 3) {
clearInterval (temp )
}
}, 100)
}
}
mounted () {
this .test ()
泰安市地方税务局}
.slide-enter-active {
transition : all 3s ease ;
opacity :0
}
.slide-enter-to {
transition : all 3s ease ;
opacity :1
}
<div v-for="(areaCell) in areaArr":key="ionName"class="pie_canvas_box">
<p class="numBar">
<span class="current">{{parseInt(areaCell.current * animateTime)}}</span><span class="total">/{{al * animateTime)}}
</p>
<transition-group
灵图天行者name="animation"
appear>
<div class="cell_box"v-for="(defultCell) lls":key="defultCell.num">
<div ::class="defultCell.classNam </div>
</transition-group>
<p class="cell_name">{{ionName}}</p>
</div>
mounted(){
this.initArea()
},
methods:{
initArea(){
// 这⼀⼤堆都是⽤来⽣成⼩⽅块，可以省略不看----------------------------start
this.areaArr.map((item, index)=>{
let vm =this
let allPart =upancyRatio)*200
let integerPart =(allPart +'').indexOf('.')>-1
?
(allPart +'').split('.')[0]
: allPart
this.integerPart = integerPart
let decimalPart =(allPart +'').indexOf('.')>-1
?(allPart +'').split('.')[1]
:0
for(let i =1; i <201; i++){
if(i <= integerPart){
if(i <=40){
num: i,
仇玉color:'#0F6D48',
className:'cell_box_twenty',
classWidth:'100%',
opacity:1
})
}else if(i >40&& i <=80){
num: i,
color:'#1E9D47',
className:'cell_box_forty',
classWidth:'100%',
opacity:1
})
}else if(i >80&& i <=120){
num: i,
color:'#1BBD6C',
className:'cell_box_sixty',
classWidth:'100%',
opacity:1
})
}else if(i >120&& i <=160){
num: i,
color:'#24F485',
className:'cell_box_eighty',
classWidth:'100%',
opacity:1
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议