vue过度效果汇总

淡入淡出fade

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s; 
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}

向下slide-down

.slide-down-enter-active { transition: all .4s ease;}
.slide-down-leave-active { transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
.slide-down-enter, .slide-down-leave-active { transform: translateY(20px); opacity: 0;}
.slide-down-move { transition: all .4s;}
.slide-down-leave-active { position: absolute !important; width: 100%;}

向上slide-up

.slide-up-enter-active { transition: all .5s ease .3s;}
.slide-up-leave-active { transition: all .5s ease;}
.slide-up-enter, .slide-up-leave-active{ transform: translateY(-20px); opacity: 0;}
.slide-up-move { transition: all .5s; }

向左slide-left

.slide-left-enter-active { transition: all .5s ease;}
.slide-left-leave-active { transition: all .5s cubic-bezier(.55,0,.1,1);}
.slide-left-enter,{ transform: translateX(20px); opacity: 0;}
.slide-left-leave-active { transform: translateX(20px); opacity: 0;}
.slide-left-move { transition: all .5s;}

向右slide-right

.slide-left-enter-active { transition: all .5s ease;}
.slide-left-leave-active { transition: all .5s cubic-bezier(.55,0,.1,1);}
.slide-left-enter,{ transform: translateX(20px); opacity: 0;}
.slide-left-leave-active { transform: translateX(20px); opacity: 0;}
.slide-left-move { transition: all .5s;}

列表list

.list-enter-active { transition: all .5s ease-in-out;}
.list-leave-active { transition: all .2s ease; opacity: 0;}
.list-enter { transform: translateY(20px); opacity: 0;}
.list-move { transition: all .5s;}
.list-leave-active { position: absolute; width: 100%;}

按钮btn

.btn-enter-active, .btn-leave-active { transition: all .5s; }
.btn-enter, .btn-leave-active { opacity: 0; transform: translateX(30px); }
.btn-move { transition: all .5s; }
.btn-leave-active { position: absolute; }