view-transitions实现卡片添加删除动画过渡效果代码-html代码-BFW代码库

view-transitions实现卡片添加删除动画过渡效果代码

代码语言：html

代码描述： view-transitions实现卡片添加删除动画过渡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@layer view-transitions {

        /* Don’t capture the root, allowing pointer interaction while cards are animating */
        @layer no-root {
                :root {
                        view-transition-name: none;
                }
                ::view-transition {
                        pointer-events: none;
                }
        }
        
        /* Cards, in general, should use a bounce effect when moving to their new position */
        @layer reorder-cards {
                @supports (view-transition-class: card) {
                        .warning {
                                display: none;
                        }
                        
                        :root {
                                --bounce-easing: linear(
                                        0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
                                        1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
                                        0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
                                        0.973, 1, 0.988, 0.984, 0.988, 1
                                );
                        }

                        .card {
                                view-transition-class: card;
                        }
                        
                        /* Without view-transition-class you had to write a selector that targets all cards … and that selector needed updating whenever you added/removed a card */
                        ::view-transition-group(*.card) {
                                animation-timing-function: var(--bounce-easing);
                                animation-duration: 0.5s;
                        }
                }
        }

        /* Newly added cards should animate-in */
        @layer add-card {
                @keyframes animate-in {
                        0% {
                                opacity: 0;
                                translate: 0 -200px;
                        }
                        100% {
                                opacity: 1;
                                translate: 0 0;
                        }
                }

                ::view-transition-new(targeted-card):only-child {
                        animation: animate-in ease-in 0.25s;
                }
        }

        /* Cards that get removed should animate-out */
        @layer remove-card {
                @keyframes animate-out {
                        0% {
                                opacity: 1;
                                translate: 0 0;
                        }
                        100% {
                                opacity: 0;
                                translate: 0 -200px;
                        }
                }

                ::view-transition-old(targeted-card):only-child {
                        animation: animate-out ease-out 0.5s;
                }
        }

}

/* Etc. */
@layer base {
        body {
                display: grid;
                height: 90dvh;
                place-items: center;
                padding: 2rem 0;
                font-family: system-ui, sans-serif;
        }

        .cards {
                padding: 0;
                display: flex;
                justify-content: center;
                width: 100%;
                gap: 2rem;
                padding: 1rem;
                flex-wrap: wrap;
        }

        .card {
                width: 100%;
                aspect-ratio: 2/3;
                display: block;
                position: relative;
                border-radius: 1rem;
                max-width: 220px;
                min-width: 100px;

                background-color: grey;
        }

        .delete-btn {
                --icon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZS8+PHBhdGggZD0iTTExMiwxMTJsMjAsMzIwYy45NSwxOC40OSwxNC40LDMyLDMyLDMySDM0OGMxNy42NywwLDMwLjg3LTEzLjUxLDMyLTMybDIwLTMyMCIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjMycHgiLz48bGluZSBzdHlsZT0ic3Ryb2tlOiMwMDA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjMycHgiIHgxPSI4MCIgeDI9Ij.........完整代码请登录后点击上方下载按钮下载查看