中国建设银行官方网站诚聘英才频道静态网站开发用到的技术
一、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().topconst 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>