CSS Transitions не выживает Реагировать Компонент изменения внутренней структуры DOM

Question

I have illustrated the problem in this CodePen

const Component = ({ structure }) => { 
    switch (structure) { 
    case 'nested': 
     return (
     <div> 
      <AnimatedComponent /> 
     </div> 
    ); 
    case 'flat': 
     return 
     <AnimatedComponent /> 
     ; 
    } 
}; 

Там какая-то логика в AnimatedComponent, которая изменяет стиль компонента в анимированных модах, например, измените цвет фона с черного на красный в течение 1 секунды. Анимацию запускают путем изменения цветового класса на AnimatedComponent. Существует CSS для обработки анимации с учетом измененного класса.

При изменении структуры DOM от вложенного до плоского, элемент HTML уничтожается и воссоздается, состояние начала перехода теряется (иначе браузер не знает, какой класс был установлен ранее, потому что элемент был вновь создан).

Что я хочу Реагировать на изменение структуры DOM с помощью перемещающихся элементов в новых позициях, а не их уничтожение и воссоздание.

Возможно ли это?

Я попытался использовать реквизиты key на <AnimatedComponent />, но это только фиксирует вспышку изменения DOM. Анимация пропущена. См. Codepen. Спасибо Thomas Rooney за это предложение.

Могу ли я сообщить React, чтобы применить изменения класса только к одному тику после того, как была изменена позиция элемента DOM?

Answer 1

Могу ли я сообщить React, чтобы применить изменения класса только на один тик после того, как была изменена позиция элемента DOM?

Да, это именно то, для чего предназначена функция setTimeout. Копирование второго примера, где вы исправили мерцание, завершение отправки цветного действия с setTimeout (без значения времени, которое по умолчанию равно 0), похоже, устраняет проблему.

onColorClick:() => { 
    setTimeout(() => { 
    dispatch({type: 'TOGGLE_COLOR'}) 
    }) 
}, 

codepen

Обновление: Я заметил, что это немного более надежным, чтобы добавить некоторое время до изменения цвета (второй аргумент в setTimeout, (fn, ms) Я считаю, что это происходит потому, что setState также происходит асинхронно..

onColorClick:() => { 
    setTimeout(() => { 
    dispatch({type: 'TOGGLE_COLOR'}) 
    }, 100) <-- play around with this value 
},