Можно ли анимировать вкладыши и удаленные изгибы?

Question

Когда я удаляю элемент из flexbox, оставшиеся предметы «привязываются» к своим новым позициям немедленно, а не оживляют.

Концептуально, поскольку элементы меняют свои позиции, я бы ожидал, что переход будет применяться.

Я установил свойство перехода всех вовлеченных элементов (в Flexbox и детей)

Есть ли способ анимировать изменения (добавляет & удаляет) к Flexbox? Это на самом деле шоу-шоппер для меня и один недостающий кусок с flexbox.

Answer 1

Помните, что спецификации гибкой коробки и спецификации сетки постоянно меняются, даже свойства и допустимые значения. Реализации браузера далеки от завершения. При этом вы можете перейти на свойство flex так, чтобы элементы проходили плавно, а затем просто прослушайте TransitionEnd, чтобы окончательно удалить узел из дерева DOM.

Вот пример JSFiddle, работает в Chrome 21: 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 2

Я установил демо-версию @ skyline3000 на основе этого примера с Treehouse. Не уверен, если это нарушит еще раз, если браузеры меняются, но это, кажется, предполагаемый способ анимации изменения размера сгибать:

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 нуля, он не будет переходить он просто исчезнет. Вам нужно просто поставить очень маленькую ценность. Также, кажется, есть артефактная ошибка при рисовании границ, поэтому я использовал фон в этом случае.