Как можно изменить положение элементов в списке без использования преобразования или сверху / слева
На днях я наткнулся на пример, который использует Vue.js, но мой вопрос больше о CSS и HTML, которые Vue использует для перехода между состояниями.
Карты временно получают класс .shuffleMedium-move, который добавляет transition: transform 1s и порядок узлов изменяется в DOM, но я не понимаю, почему происходит переход, поскольку свойство transform, кажется, никогда не устанавливается, а элементы позиционируются просто с использованием float:left.
Я занимаюсь CSS довольно давно, и мне всегда приходилось прибегать к использованию комбинации JavaScript position: absolute и transform для достижения аналогичного результата. Решение Vue кажется действительно элегантным, но я не понимаю, как оно работает.
хм, я не вижу других добавленных классов, кроме shuffleMedium-move, который добавляет только transition: transform 1s. Я бы ожидал увидеть что-то вроде: shuffleMedium-start или shuffleMedium-end или добавление встроенных стилей, но vuejs, похоже, ничего из этого не делает.
transform действительно быстро добавляется в линию, а затем сразу удаляется.
@duprasa эти классы добавляются, а затем удаляются, вы не увидите их в инспекторе. Я тестировал время преобразования 25 секунд, и когда я установил точки останова в отладчике, я смог увидеть классы
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
От документация по переходу списка
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.
От Статья FLIP
FLIP stands for First, Last, Invert, Play.
Let’s break it down:
- 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.
Пошаговый пример
Таким образом, мы можем проверять изменения на каждом этапе процесса анимации.
Когда он играет в реальном времени, transform действительно быстро добавляется в линию, а затем сразу удаляется, так что похоже, что он никогда не устанавливался.
var $el = $('.target');
var el = $el.get(0);
var data = {};
function first() {
data.first = el.getBoundingClientRect();
console.info('First: get initial position', data.first.left, 'px');
}
function last() {
$el.toggleClass('last');
data.last = el.getBoundingClientRect();
console.info('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.info('Invert: applies a transform to place the item where it was.');
}
function play() {
requestAnimationFrame(function() {
$el.addClass('animate');
el.style.transform = '';
});
console.info('Play: adds the transition class and removes the transform.');
}
function end() {
$el.removeClass('animate');
console.info('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>Спасибо за развернутый ответ :). Я поэкспериментирую с этим, я все еще удивлен, что хром не показывает встроенный transform, хотя он почти мгновенный.
Анимация выполняется с помощью классов, в то время как вы не видите эти классы во время проверки, потому что они добавляются / удаляются мгновенно. Но если вы поместите строку
debuggerв функцию перемешивания после строк vue (...) и проверите dom, вы увидите другие классы. Вы должны сначала проверить карту, а затем запустить код, если вы запустите код, и он начнет отладку, вы не сможете проверить