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

最新推荐文章于 2026-05-15 05:02:15 发布

原创最新推荐文章于 2026-05-15 05:02:15 发布 · 1.9w 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #transition #从下往上进入 #从右往左进入

vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

css

20 篇文章

订阅专栏

本文详细介绍了几种常见的页面过渡动画效果实现方法，包括从下往上、从上往下、从右往左及从左往右的不同方向动画，并提供了具体的CSS样式代码示例。

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);
}