是否可以对flexbox的插入和删除进行动画处理？

Question

当我从Flexbox移除项目时，其余项目会立即“捕捉”到其新位置，而不是进行动画处理。

从概念上讲，由于项目正在改变其位置，所以我希望过渡适用。

我已经在所有涉及的元素（flexbox和子元素）上设置了transition属性

是否有任何方法可以将编辑（添加和删除）动画化到Flexbox？对我来说，这实际上是一台最畅销的产品，而对于flexbox，这是一件缺失的东西。

Answer 1

我根据Treehouse中的示例修复了@ skyline3000的演示。不知道如果浏览器更改，是否还会再次中断，但这似乎是使flex大小更改动画的预期方式：

http://jsfiddle.net/2gbPg/2/

[我也使用jQuery，但从技术上讲它不是必需的。

.flexed {
    background: grey;
    /* The border seems to cause drawing artifacts on transition. Probably a browser bug. */
    /* border: 1px solid black; */
    margin: 5px;
    height: 100px;
    flex-grow: 1;
    transition: flex-grow 1000ms linear;
}

.removed {
    /* Setting this to zero breaks the transition */
    flex-grow: 0.00001;
}

关于CSS要注意的一件事是，您无法转换为零的flex-grow，它不会转换，只会消失。您只需要输入一个很小的值。在绘制边框时似乎还存在人为错误，因此在这种情况下我使用了背景。

Answer 2

请记住，即使是属性和有效值，“灵活框模型”和“网格布局”规范也在不断变化。浏览器的实现也远未完成。就是说，您可以在flex属性上进行过渡，以便元素平滑过渡，然后只需侦听TransitionEnd即可最终从DOM树中删除该节点。

下面是在Chrome 21中运行的示例JSFiddle：http://jsfiddle.net/5kJjM/（单击中间div）

var node = document.querySelector('#remove-me');

node.addEventListener('click', function(evt) {
  this.classList.add('clicked');
}, false);

node.addEventListener('webkitTransitionEnd', function(evt) {
  document.querySelector('#flexbox').removeChild(this);
}, false);

#flexbox {
  display: -webkit-flex;
  -webkit-flex-flow: row;
}

.flexed {
  border: 1px solid black;
  height: 100px;
  -webkit-flex: 1 0 auto;
  -webkit-transition: -webkit-flex 250ms linear;
}

.clicked {
  -webkit-flex: 0 0 auto;
}

<div id="flexbox">
  <div class="flexed"></div>
  <div class="flexed" id="remove-me"></div>
  <div class="flexed"></div>
</div>

编辑：为了进一步说明，在删除节点时，应将其flex设置为0，然后将其从DOM中删除。添加节点时，将其添加为flex：0，然后将其转换为flex：1

Answer 3

我不小心使它以简单的方式工作。基本上，您设置为width:0;flex-grow:1，当然要添加transition:all 2s;，仅此而已。这是一个奇怪的hack。

See it working

Answer 4

我完成了一个Codepen，当您删除元素时，它会给元素添加动画效果，请看一下：https://codepen.io/MauriciAbad/pen/eQoQbK

可以优化，但是可以。 ; D

HTML

<div class="container">
    <div id="0"></div>
    <div id="1"></div>
    ... more divs ...
</div>

CSS

.container{
    display: flex;
    flex-wrap: wrap;
}
.container > div{
    flex-grow: 1;
    transform-origin: left top;
}

JavaScript

var cards = document.querySelectorAll('.container > div');
cards.forEach((card) => {
    card.addEventListener('click', () => {removeCard(card);});
});

var cardsOldInfo = //example content
    {"cardId": {
        "x": 100,
        "y": 200,
        "width": 100
        }
    };
var cardsNewInfo = cardsOldInfo;

function removeCard(card){
    cardsOldInfo = getCardsInfo();
    card.parentNode.removeChild(card);
    cardsNewInfo = getCardsInfo();
    moveCards();
}

function getCardsInfo(){
    updateCards();
    let cardsInfo = {};
    cards.forEach((card) => {
        var rect = card.getBoundingClientRect();
        cardsInfo[card.id] = {
            "x": rect.left,
            "y": rect.top,
            "width": (rect.right - rect.left)
        };
    });
    return cardsInfo;
}

function moveCards(){
    updateCards();
    cards.forEach((card) => {
        card.animate([ 
            {
                transform: `translate(${cardsOldInfo[card.id].x - cardsNewInfo[card.id].x}px, ${cardsOldInfo[card.id].y -cardsNewInfo[card.id].y}px) scaleX(${cardsOldInfo[card.id].width/cardsNewInfo[card.id].width})`
            }, 
            {
                transform: 'none'
            }
        ], { 
            duration: 250,
            easing: 'ease-out'
        });
        });
}

function updateCards(){
  cards = document.querySelectorAll('.container > div');
}

Answer 5

我一直在尝试对Flexbox中的行进行动画处理。仅通过CSS不可能做到这一点。因此，我使用了一些JavaScript并为我的flexbox行添加了一个额外的父元素。

HTML：

<div class="outer-container">
  <div class="inner-container">
    <div class="row">Row number 1</div>
  </div>
</div>

<button id="add">Add one more item</button>

CSS：

.row{
  height : 40px;
  width : 200px;
  border: 1px solid #cecece;
  text-align : center;
  padding-top : 20px;
}

.outer-container {
  height : 500px;
  border : 1px solid blue;
  width : 250px;
  display: flex;
  justify-content : center;
  align-items: center;
}

.inner-container { 
  height : 42px;
  transition : height 0.3s;
 }

button {
  width : 200px;
  height: 30px;
  margin-left : 80px;
  margin-top : 10px;
}

Javascript：

(() => {
    let count = 1;
    document.querySelector("#add").addEventListener('click', () => {
        const template = document.createElement('div');
        count += 1;
        template.textContent = `Row number ${count}`;
        template.className = 'row';

        const innerContainer = document.querySelector('.inner-container');
        innerContainer.appendChild(template);
        innerContainer.style.height = `${innerContainer.clientHeight + 42}px`;
    })
})();

正在运行的演示：https://jsfiddle.net/crapbox/dnx654eo/1/

Answer 6

对@ skyline3000和@ chris-nicola的解决方案的另一种改编：http://jsfiddle.net/2gbPg/2/

您可以为max-width（或适当时为max-height设置动画，在删除时动画为0，在插入时动画为100%。