vue transition 的 从下往上进入 从上往下进入 从右往左进入 从左往右进入效果

1.从下往上进入
<transition name="pull-up">
 .....


 .....


</transition>


2.从上往下进入


<transition name="drop-down">


 .....


 .....


</transition>








%common1 {
  opacity: 1;
  -ms-transform: scaleY(1);
  transform: scaleY(1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
  opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
  -ms-transform-origin: center top;
  transform-origin: center top;
}




.pull-up-enter-active,
.pull-up-leave-active {
  @extend %common1;
  transform-origin: center bottom;
}




.pull-up-enter,
.pull-up-leave-active,
.drop-down-enter,
.drop-down-leave-active {
  opacity: 0;
  -ms-transform: scaleY(0);
  transform: scaleY(0);
}




.drop-down-enter-active,
.drop-down-leave-active {
  @extend %common1;
  transform-origin: center top;
}




2.从右往左进入
<transition name="right-slide">
 .....


 .....


</transition>








.right-slide-enter,
.right-slide-leave-active {
transform: translateX(130px);
}


.right-slide-leave-active,
.right-slide-enter-active {
transition: all0.3s;
}
2.从左往右进入
<transition name="slide-right">
 .....


 .....


</transition>






.slide-right-enter,
.slide-right-leave-active {
transform: translateX(-350px);
}


.slide-right-leave-active,
.slide-right-enter-active {
transition: all0.3s 0.3s cubic-bezier(0.33, 0.25, 0.33, 1);
}