当前位置：首页 > article >正文

CSS系列（50）-- View Transitions详解系列总结

article 2025/1/7 15:23:36

前端技术探索系列：CSS View Transitions详解 & 系列总结 🌟

致读者：感谢一路相伴 💝

前端同行们，

在过去的系列文章中，我们一起探索了CSS的众多新特性。

今天，作为系列的收官之作，让我们一起探讨View Transitions API，这个充满未来感的特性，同时也让我们一起回顾这段学习旅程。

View Transitions基础 🚀

过渡定义

/* 基础过渡 */
::view-transition-old(root) {
    animation: fade-out 300ms ease-in-out;
}

::view-transition-new(root) {
    animation: fade-in 300ms ease-in-out;
}

/* 命名过渡 */
::view-transition-old(header),
::view-transition-new(header) {
    animation: slide 500ms ease-in-out;
    animation-direction: inherit;
}

状态过渡

/* 状态动画 */
.card {
    view-transition-name: card;
    transition: all 300ms;
    
    &.expanded {
        view-transition-name: card-expanded;
    }
}

/* 共享元素 */
.shared-element {
    view-transition-name: shared;
    
    &::view-transition {
        animation: morph 500ms ease-in-out;
    }
}

高级特性 🎯

页面切换

// 页面过渡
async function navigatePage(url) {
    const transition = document.startViewTransition(async () => {
        await updateDOM(url);
    });
    
    await transition.finished;
}

/* 过渡效果 */
.page-transition {
    /* 入场动画 */
    ::view-transition-new(page) {
        animation: 
            300ms ease-in-out both slide-in,
            500ms ease-in-out both fade-in;
    }
    
    /* 出场动画 */
    ::view-transition-old(page) {
        animation: 
            300ms ease-in-out both slide-out,
            500ms ease-in-out both fade-out;
    }
}

列表动画

/* 列表项过渡 */
.list-item {
    view-transition-name: list-item;
    
    &::view-transition {
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        animation-duration: 400ms;
    }
}

/* 交错动画 */
.staggered-list {
    --delay: calc(var(--index) * 50ms);
    
    animation-delay: var(--delay);
}

实际应用 💫

图片画廊

/* 画廊过渡 */
.gallery-item {
    view-transition-name: gallery-item;
    cursor: pointer;
}

/* 详情视图 */
.detail-view {
    view-transition-name: gallery-item;
    position: fixed;
    inset: 0;
    z-index: 100;
    
    &::view-transition {
        animation: zoom 500ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

主题切换

/* 主题过渡 */
:root {
    view-transition-name: theme;
    
    &[data-theme="dark"] {
        color-scheme: dark;
    }
    
    &[data-theme="light"] {
        color-scheme: light;
    }
}

/* 过渡动画 */
::view-transition-old(theme),
::view-transition-new(theme) {
    animation: theme-fade 1s ease-in-out;
}

性能优化 ⚡

渲染优化

/* 性能提升 */
.optimized-transition {
    contain: layout style;
    will-change: transform;
    
    &::view-transition {
        contain: paint;
    }
}

/* 条件加载 */
@supports (view-transition-name: none) {
    .enhanced {
        view-transition-name: enhanced;
    }
}