vue实现卡片式上下滑动_vue实现手机号码抽奖上下滚动动画示例

Document

.in-out-translate-demo-wrapper {

position: relative;

height: 58px;

}

.in-out-translate-demo-wrapper button {

position: absolute;

}

.in-out-translate-fade-enter-active,

.in-out-translate-fade-leave-active {

transition: all .5s;

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

}

.in-out-translate-fade-enter,

.in-out-translate-fade-leave-active {

opacity: 0;

}

.in-out-translate-fade-enter {

transform: translateX(54px);

-webkit-transform: translateX(54px);

-moz-transform: translateX(54px);

-o-transform: translateX(54px);

}

.in-out-translate-fade-leave-active {

transform: translateX(-54px);

-webkit-transform: translateX(-54px);

-m