效果

不说废话了，直接先来看实现的效果：

分析

首页页面的大体结构如下：

动画分解：

1.article-list内容动态设置样式整体上移移出屏幕，透明度改变

2.article-detail通过路由跳转借助transition实现上移动画，透明度改变

3.article-detail页面的骨架屏和文章内容fade切换，为了方便transition配合animate.css，也可以自己手撸

实现

首页template，关键在于通过路由切换来动态改变样式，detail借助transition实现：

<search-header />

<van-tabs v-model:active="active" animated>

<van-tab title="标签 1"><content-list /></van-tab>

<van-tab title="标签 2"></van-tab>

<van-tab title="标签 3"></van-tab>

<van-tab title="标签 4"></van-tab>

</van-tabs>

</div>

<router-view></router-view>

</transition>

</div>

</template>

首页scss：

.home-container {

width: 100vw;

height: 100%;

background-color: var(--box-color);

overflow: hidden;

.home-content {

transition: all 0.6s ease;

}

.home-hidden {

transform: translateY(-100%);

opacity: 0;

}

.article-enter-active {

animation: articleChange 0.6s;

}

.article-leave-active {

animation: articleChange 0.3s reverse;

}

@keyframes articleChange {

0% {

opacity: 0;

transform: translateY(100%);

}

100% {

opacity: 1;

transform: translateY(0);

}

详情页template，主要在于transition配合animate.css十分方便，通过leave-active-class和enter-active-class设置animate样式，延迟时间看个人情况进行选择：

<transition

leave-active-class="animate__animated animate__fadeOut"

enter-active-class="animate__animated animate__fadeIn animate__delay-1s"

<van-skeleton title :row="6" />

</div>

<van-skeleton title :row="4" />

</div>

</div>

<p>测试内容测试测试</p>

<p>测试内容测试测试1231313</p>

<p>测试内容测试测试测试内容测试测试</p>

<p>测试内容测试测试</p>

<p>测试内容测试测试测试内容测试测试</p>

</div>

</transition>

</div>

</template>

详情页scss，需要注意的一点依然是content-detail需要设置定位，不然动画切换会出问题：

.content-article {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: var(--box-color);

box-sizing: border-box;

z-index: 1000;

overflow-y: auto;

padding: 20px;

opacity: 1;

.bg-cover {

width: 100%;

height: 230px;

background-color: #deeeff;

border-top-right-radius: 10px;

border-top-left-radius: 10px;

overflow: hidden;

}

.content-skeleton {

.sk {

margin: 20px 0;

:deep() {

.van-skeleton {

padding: 0;

}

.content-detail {

position: absolute;

top: 0;

left: 0;

padding: 20px;

.detail-img {

width: 100%;

height: 100%;

object-fit: cover;

}

前端那些花里胡哨的动画效果—移动端文章详情页跳转

效果

分析

实现