vue从上到下淡入淡出过渡动画

从上往下的淡入淡出的过渡

/* 开始 */
//dialogFade 是容器的类名 
// <transition name="dialogFade">过度内容</transition >
.dialogFade-enter,
.dialogFade-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
/* 过程 */
.dialogFade-enter-active {
  transition: all 0.5s;
}
/* 结束 */
.dialogFade-enter-to {
  opacity: 1;
}
.dialogFade-leave-active {
  transition: all 0.5s;
}