Css 是否可以设置Flexbox插件的动画&；移除？

当我从flexbox中移除一个项目时，剩余的项目会立即“捕捉”到它们的新位置，而不是设置动画

从概念上讲，由于项目正在改变它们的位置，因此我希望应用转换

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

---

有没有办法对flexbox的编辑（添加和删除）设置动画？这实际上是我的一个止步符，也是flexbox缺少的一块。

请记住，灵活的盒子模型和网格布局规范不断变化，甚至属性和有效值也在不断变化。浏览器的实现也远未完成。也就是说，您可以在

flex

属性上进行转换，以使元素平稳过渡，然后只需侦听

TransitionEnd

，最终从DOM树中删除节点

下面是一个在Chrome21中运行的JSFIDLE示例：（单击中间的div）

var node=document.querySelector（'#remove me'）；
node.addEventListener（'click'，函数（evt）{
this.classList.add（'clicked'）；
}，假）；
node.addEventListener（'WebKittTransitionEnd'，函数（evt）{
document.querySelector（“#flexbox”）.removeChild（this）；
}，假）
#flexbox{
显示：-webkit flex；
-webkit flex流：行；
}
.弯曲{
边框：1px纯黑；
高度：100px；
-webkit flex:10自动；
-webkit过渡：-webkit flex 250ms线性；
}
.点击{
-webkit flex:0 0自动；
}
我已经根据来自的这个示例修复了@skyline3000的演示。不确定如果浏览器更改，是否会再次中断，但这似乎是设置flex大小更改动画的预期方式：


我还使用了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
，它不会转换，它只会消失。你只需要输入一个很小的值。此外，在绘制边框时似乎存在一个伪影缺陷，因此我在本例中使用了一个背景。
我意外地使它以一种简单的方式工作。
基本上，您可以设置
width:0；flex-grow:1
当然还有添加
转换：全部2就是这样。这是一种奇怪的黑客行为

我已经完成了一个代码笔，当您删除一个元素时，它会为元素设置动画，请看：

它可以优化，但可以工作；D

HTML
JavaScript
我一直在尝试为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>

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`;
    })
})();

工作演示：
对@skyline3000和@chris nicola解决方案的另一个改编：

您只需将
max width
（或
max height
视情况而定）设置为动画，移除时设置为
0
，插入时设置为
100%
。
您是否能够发布一个重现您的问题的演示？或者，或者类似的，我们可以看到你的代码中发生了什么，而不必构建我们自己的测试；我想这可能是当盒子被移除时动画的宽度。如果中间的div中有内容，这也不太管用。你可以很容易地包装内容，并在转换期间将溢出设置为隐藏，以便它可以很好地工作。我在演示中找不到任何转换。。。它就像普通的flex一样工作。。。演示中的
transitionEnd
处理程序没有触发，这意味着没有应用任何转换…是的，同样的问题。如果这是工作，它不再是。如何做动画从中心到flex Start的内容调整我不太清楚我明白你的意思，你能发布一个例子吗？有可能这样做与垂直布局？i、 e.弹性流动：柱；这似乎只有在没有内容的情况下才有效，这似乎……不太可能。（例如，在div中放入一些文本）当元素是图像时，它也不起作用
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');
}

<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>

.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;
}

(() => {
    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`;
    })
})();