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

Filp动画

news 来源：原创 2025/5/23 7:51:57

一、filp动画是什么？

在前端开发中，Flip 动画通常指的是通过 CSS 或 JavaScript 实现的类似翻转效果的动画。通常涉及到元素的旋转或翻转，给用户一种“翻书”或“翻牌”之类的视觉感受。常见的应用场景包括卡片翻转、页面切换、以及各种交互式元素的动画效果。

二、Filp动画的运行步骤

记录变化之前的位置
没有过渡的从A瞬间变化到B位置
记录变化后的位置
计算位置的差值
将元素回退到之前的位置（可以利用transform和translate来实现）
去掉移动回去的样式然后加上过渡即可

2.示例实现

我们创建两个元素给两个元素分别添加动画

<body>
    <div>
        <ul>
            <li style="background-color: aqua;">111</li>
            <li style="background-color: bisque;">222</li>
        </ul>

        <button>交换</button>
    </div>

    <script>

        const getY = (dom) => dom.getBoundingClientRect().top

        const nextTick= (callBack) => {
            requestAnimationFrame(() => {
                requestAnimationFrame(callBack)
            })
        }

        const applyTransition = (dom, initY) => {
            // 记录变化后的位置
            const li1CurY = getY(dom)

            // 计算差值
            const diif = initY - li1CurY


            // 利用transfrom 和 translate 将元素移动到之前的位置
            dom.style.transform = `translateY(${diif}px)`


            // 去掉移动回去的样式然后加上过渡即可

            nextTick(() => {
                dom.style.transform = 'none'
                dom.style.transition = '0.3s'

                // 在过渡动画结束时移除过渡属性
                dom.addEventListener('transitionend', () => {
                       dom.style.transition = 'none'
                } )
            })


        }
        /* 
            1. 记录变化之前的位置
            2. 没有过渡的从A瞬间变化到B位置
            3. 记录变化后的位置
            4. 计算位置的差值
            5. 将元素回退到之前的位置 （可以利用transform和translate来实现）
            6. 去掉移动回去的样式然后加上过渡即可
        */


        const btn = document.querySelector('button')

        btn.onclick = () => {
            const ul = document.querySelector('ul')

            const li = document.querySelectorAll('li')
            const li1 = li[0]
            const li2 = li[1]

            // 第一步计算之前的位置
            const li1Y = getY(li1)
            const li2Y = getY(li2)

            // 第二步变化位置
            ul.insertBefore(li2, li1)

            applyTransition(li1, li1Y)
            applyTransition(li2, li2Y)

        }



    </script>
</body>