2019-05-04 |

动画组

p>怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 组件

  • 不同于 <transition>,它会以一个真实元素呈现:默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
  • 过渡模式不可用,因为我们不再相互切换特有的元素。
  • 内部元素 总是需要 提供唯一的 key 属性值。
  
<transition-group name="slide" tag="ul">        
  <li class="item p15" v-for="(item,index) in listing" :key="item"> 
</transition-group>
  
/* 定义进 的关键帧动画*/
@keyframes slideIn{
  from{ opacity: 0; transform: translateY(-80px);}
  to{opacity: 1; transform: translateY(0px);}
}
/* 定义出 的关键帧动画*/
@keyframes slideOut{
  from{ opacity: 1; transform: translateX(0);}
  to{opacity: 0; transform: translateX(-100%);}
}


/*enter-active 进入时候添加class名称*/
.slide-enter-active{
  animation: slideIn .5s ease;
}
/*离开的时候添加的class 名称*/
.slide-leave-active{
  animation: slideOut .3s ease;
  position: absolute;
}
/*正在移动元素 添加的class名称(vue 内置添加的)*/
.slide-move{
  transition: all .3s ease;
}
v-move 特性,它会在元素的改变定位的过程中应用
v-move 对于设置过渡的切换时机和过渡曲线非常有用

0

发表评论

    评价:
    验证码: 点击我更换图片
    最新评论