实现一个箭头点击折叠动画
<div class="prod-group">
<div class="list-title">产品中心</div>
<div class="list-icon h-right" @click="toggleProd">
<i class="iconfont icon-awtight " :class="isCollapse?'arrow-down':'arrow-up'" ></i>
</div>
</div>
<transition name="fade">
<div class="prod-list" v-if="isCollapse">
<div class="prod-item">11111111111111111</div>
<div class="prod-item">11111111111111111</div>
<div class="prod-item">11111111111111111</div>
<div class="prod-item">11111111111111111</div>
<div class="prod-item">11111111111111111</div>
<div class="prod-item">11111111111111111</div>
<div class="prod-item">11111111111111111</div>
</div>
</transition>
css如下
.arrow-down{
width: 16px;
height: 16px;
display: inline-block;
animation: down 0.3s ;
}
.arrow-up{
width: 16px;
height: 16px;
display: inline-block;
animation: up 0.3s ;
}
@keyframes down{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(90deg);
}
}
@keyframes up{
0%{
transform: rotate(90deg);
}
100%{
transform: rotate(0deg);
}
}
原本以为正常,却发现点击以后虽然有动画但是马上又回到了初始值,最后发现问题出在没有设置animation的forwards属性
.arrow-down{
width: 16px;
height: 16px;
display: inline-block;
animation: down 0.3s forwards;
}
.arrow-up{
width: 16px;
height: 16px;
display: inline-block;
animation: up 0.3s forwards;
}