如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置 [英] How is it possible to transition the position of items in a list without using transform or top/left

问题描述

前几天我偶然发现使用Vue.js的示例，但我的问题更多的是关于Vue用于实现状态之间转换的CSS和HTML。

The other day I stumbled onto an example that uses Vue.js, but my question is more about the CSS and HTML that Vue uses to achieve the transition between states.

这些卡暂时获得类 .shuffleMedium-move 添加转换：转换1s 并且DOM中节点的顺序发生变化，但我不明白为什么转换发生在转换属性似乎永远不会被设置，并且项目的位置只需使用 float：left 。

The cards temporarily get the class .shuffleMedium-move which adds a transition: transform 1s and the order of the nodes change in the DOM, but I don't understand why the transition occurs since the transform property never seems to get set and the items are positioned simply using float:left.

我已经做了很长一段时间的CSS了，我总是不得不求助于使用JavaScript 的位置：绝对和 transform 以获得类似的结果。 Vue的解决方案似乎非常优雅，但我不明白它是如何工作的。

I've been doing CSS for quite a while and I've always had to resort to using a combination of JavaScript position: absolute and transform to achieve a similar result. Vue's solution seems really elegant, but I don't understand how it works.

推荐答案

来自列表转换文档

这可能看起来很神奇，但在引擎盖下，Vue正在使用一种名为 FLIP 使用变换将元素从旧位置平滑过渡到新位置。

This might seem like magic, but under the hood, Vue is using an animation technique called FLIP to smoothly transition elements from their old position to their new position using transforms.

来自< a href =https://aerotwist.com/blog/flip-your-animations/ =nofollow noreferrer> FLIP文章

FLIP 代表 F irst， L ast，我 nvert， P 奠定。

FLIP stands for First, Last, Invert, Play.

让我们将其分解：

• ˚F irst：过渡中涉及的元素的初始状态。


• Last：元素的最终状态。


• 反转：这是有趣的一点。你从第一个和最后一个中弄清楚元素是如何变化的，所以 - 比如 - 它的宽度，高度，
  不透明度。接下来，您应用变换和不透明度更改以反转，或者
  反转它们。如果元素在First和
  之间向下移动了90px，那么你将在Y中应用-90px的变换。这使得
  元素看起来好像它们仍处于First位置但是，
  至关重要的是，它们不是。


• 播放：为您更改的任何属性启用转换，然后删除反转更改。因为元素或
  元素处于最终位置，删除转换和
  不透明度将使他们从人造的第一个位置，到
  最后位置。

• First: the initial state of the element(s) involved in the transition.
• Last: the final state of the element(s).
• Invert: here’s the fun bit. You figure out from the first and last how the element has changed, so – say – its width, height, opacity. Next you apply transforms and opacity changes to reverse, or invert, them. If the element has moved 90px down between First and Last, you would apply a transform of -90px in Y. This makes the elements appear as though they’re still in the First position but, crucially, they’re not.
• Play: switch on transitions for any of the properties you changed, and then remove the inversion changes. Because the element or elements are in their final position removing the transforms and opacities will ease them from their faux First position, out to the Last position.

分步示例

这样，我们可以检查更改动画过程的每一步。

Step by step example

That way, we can inspect changes at each step of the animation process.

当它实时播放时，转换实际上是快速添加的内联和它会被立即删除，所以它看起来好像从未设置过。

When it's playing in real time, the transform is really quickly added inline and it's then removed immediately, so it looks like it's never set.

var $el = $('.target');
var el = $el.get(0);
var data = {};

function first() {
  data.first = el.getBoundingClientRect();
  console.log('First: get initial position', data.first.left, 'px');
}

function last() {
  $el.toggleClass('last');
  data.last = el.getBoundingClientRect();
  console.log('Last: get new position', data.last.left, 'px');
}

function invert() {
  var invert = data.first.left - data.last.left;
  el.style.transform = `translateX(${invert}px)`;
  console.log('Invert: applies a transform to place the item where it was.');
}

function play() {
  requestAnimationFrame(function() {
    $el.addClass('animate');
    el.style.transform = '';
  });
  console.log('Play: adds the transition class and removes the transform.');
}

function end() {
  $el.removeClass('animate');
  console.log('End: removes the transition class.');
}


var steps = [first, last, invert, play, end];

var step = 0;

function nextStep() {
  steps[step++ % steps.length]();
}

$('button').click(nextStep);

.last {
  margin-left: 35px;
}

.animate {
  transition: transform 1s;
}

.target {
  display: inline-block;
  padding: 5px;
  border: 1px solid #aaa;
  background-color: #6c6;
}

<div class="target">target</div>
<br>
<button type="button">Next</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这篇关于如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！