Flip技术

最新推荐文章于 2024-07-16 17:18:30 发布

何嘉烟

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量255

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/the_more_more/article/details/126103431

版权

Flip技术

前言

在我们使用vue做一些卡片移动效果的动画时候，可能会想到使用transition来实现，这样就不会显得生硬，但是在一些项目里面需要去操作样式，这时针对css的transition可能做起来会很困难，改变的不是css，而是元素的结构，这时候就很困难了

了解Flip

Flip是 First、Last、Invert和 Play四个单词首字母的缩写

字面意思：

First：这也是我们首先做的，这里我们需要使用getBoundingClientRect()这个 API来处理（ offsetLeft和 offsetTop也是可以的），这里主要是记录我们元素出现的位置使用一个值来记录，方便后续改变之后的值现成对比
Last：代码执行完毕之后，让元素发生相应的变化，并记录元素在动画最后状态的位置和尺寸，即动画结束之后那一刻收集元素的位置和尺寸信息
Invert：有着转化的意思，这一步简单的概括就是将开始和结束的位置进行标记对比，计算好差值，然后使用 transform属性将元素反转回动画的开始状态，这一时刻js已经计算好了等待Play的执行
Play：这一步简单理解为将计算好的transform应用起来，这时候这个动画形式就运行起来了

通俗的来讲就是，开始记录一次初始位置，再记录结束位置，计算好初识和结束的偏差值，应用执行transform

示例

用一个简单的封装示例就可以演示出动画

新建好index.html，书写以下内容：

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .btn {
      margin: 50px auto 10px;
      width: 100px;
      text-align: center;
    }

    .btn button {
      margin: 0 1em;
      outline: none;
      border: none;
      background: #579ef8;
      color: #fff;
      padding: 7px 10px;
      border-radius: 5px;
      cursor: pointer;
    }

    .container {
      width: 500px;
      margin: 20px auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 30px;
      box-sizing: border-box;
      background-color: #eee;
    }

    .text {
      width: 50px;
      height: 50px;
      background-color: yellowgreen;
      line-height: 50px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="btn">
    <button>排序</button>
  </div>
  <div class="container">
    <div class="text">老大</div>
    <div class="text">老二</div>
    <div class="text">老三</div>
    <div class="text">老四</div>
    <div class="text">老五</div>
    <div class="text">老六</div>
    <div class="text">老七</div>
  </div>
  <script>
    let container = document.querySelector('.container');
    let btn = document.querySelector('.btn');
    btn.onclick = () => {
      record(container)
      let length = container.children.length;
      let index = 0
      // if (index < length - 1) { 这个就是逐个执行,点击按钮执行一次
      while (index < length - 1) { // 一次性执行完毕，点击按钮直接反转
        let node = container.children[index]
        let lastNode = container.children[length - 1]
        container.insertBefore(lastNode, node)
        index++
      }
      move(container)
    }

    function record(container) {
      for (let i = 0, len = container.children.length; i < len; i++) {
        const dom = container.children[i]
        const rect = dom.getBoundingClientRect()
        dom.startX = rect.left
        dom.startY = rect.top
      }
    }

    function move(container) {
      for (let i = 0, len = container.children.length; i < len; i++) {
        const dom = container.children[i]
        const rect = dom.getBoundingClientRect()
        const curX = rect.left, curY = rect.top
        dom.animate([
          { transform: `translate(${dom.startX - curX}px, ${dom.startY - curY}px)` },
          { transform: `translate(0px, 0px)` }
        ], { duration: 600 })
      }
    }
  </script>
</body>

</html>

record函数记录好初始的位置

move函数记录好结束的位置，并计算好初始和结束的差值并应用上去。

何嘉烟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Flip技术

在我们使用做一些卡片移动效果的动画时候，可能会想到使用来实现，这样就不会显得生硬，但是在一些项目里面需要去操作样式，这时针对的可能做起来会很困难，改变的不是，而是元素的结构，这时候就很困难了Flip是、、和四个单词首字母的缩写字面意思：First：这也是我们首先做的，这里我们需要使用这个来处理（和也是可以的），这里主要是记录我们元素出现的位置使用一个值来记录，方便后续改变之后的值现成对比Last：代码执行完毕之后，让元素发生相应的变化，并记录元素在动画最后状态的位置和尺寸，即动画结束之后那一刻收集
复制链接

扫一扫