css3 - transicion - Reaccionar la transición css no funciona correctamente

transition css hover

Question

He escrito una aplicación React, usando transiciones CSS. Pero esas transiciones no funcionan correctamente en algunos de los componentes. En mi aplicación , solo los componentes que se mueven hacia arriba funcionan bien, aquellos que se mueven hacia abajo se mueven instantáneamente sin animación. (Quiero que los dos movimientos con animación.)

Aquí está el CSS que usé allí:

div.canvas {
    position: absolute;
    top: 90px;
    left: 60px;
    width: 640px;
    height: 480px;
    border: 1px solid #999;
    background: white;

}

div.canvas-rect {
    position: relative;
    margin-left: 20px;
    margin-top: 10px;
    height: 20px;
    background: green;

    transition: all 1s linear;
    -moz-transition: all 1s linear; /* Firefox 4 */
    -webkit-transition: all 1s linear; /* Safari 和 Chrome */
    -o-transition: all 1s linear; /* Opera */

}

ACTUALIZADO:

También construí un proyecto codepen.io para mostrar el problema. Tiene el código completo de este proyecto de demostración.

He intentado agregar una entrada de registro a los métodos componentDidUpdate , componentDidMount y componentWillUnmount para mostrar si estos componentes se recrean o actualizan, muestra que todos se actualizan (no se vuelven a crear o se eliminan) cada segundo.

Answer 1

Bueno, después de que empecé una recompensa porque también tengo este problema, finalmente encontré lo que parece ser el problema.

Cuando utiliza la posición absoluta (o relativa, como en su caso), si vuelve a renderizar la lista completa cada vez, React reordenará los elementos en el DOM (como dijo, los elementos no se están recreando, solo actualizado). Pero esto crea el problema con las transiciones ... aparentemente, si mueves un elemento mientras la transición se está ejecutando, terminas cortando la animación.

Por lo tanto, para los casos en los que desea utilizar la posición absoluta, el concepto clave es renderizar los contenedores de sus elementos una vez (en este caso, solo divs) y solo cambiar los contenidos internos en función del nuevo orden. Si necesita agregar más elementos, simplemente agréguelos al final.

He modificado tu codepen para que refleje lo que estoy diciendo. Mi ejemplo es muy tonto porque acabo de crear 4 divs ad-hoc, pero ilustra la idea: cree tantos contenedores como necesite, pero NO use un mapa que los recrea cada vez, o se cortarán sus transiciones.

https://codepen.io/damianmr/pen/boEmmy?editors=0110

const ArrList = ({
  arr
}) => {
  return (
    <div style={{position: ''relative''}}>
      <div className={`element element-${arr[0]} index-${arr[0]}`}>{arr[0]}</div>
      <div className={`element element-${arr[1]} index-${arr[1]}`}>{arr[1]}</div>  
      <div className={`element element-${arr[2]} index-${arr[2]}`}>{arr[2]}</div>  
      <div className={`element element-${arr[3]} index-${arr[3]}`}>{arr[3]}</div>  
    </div>
  );
}

Entonces, el problema es básicamente cómo crea una lista estática de contenedores y cómo itera a través de esa lista para que el primer contenedor presente el primer elemento de sus datos, el segundo contenedor el segundo elemento, etc.

Espero que ayude, este problema me estaba volviendo loco también! :)

Answer 2

Has recreado elementos DOM cada vez.
Debe definir el valor clave de recopilación. Cambié su valor clave '''' + el a '''' + index .

<div key={'''' + index} className={''element element-'' + el + '' index-'' + index} >

Solo cambia las propiedades de css solo :)

Answer 3

Puedes engañar a React usando el index como clave. Si piensa en el e e index como posición inicial (índice) y posición final (el), el elemento se ha movido a la antigua posición final al final de la transición, y cuando está allí, es asumido por el nuevo comienzo La posición y (índice) se cambian para coincidir con la nueva configuración. Esto se debe a que cuando establece una key en un elemento para reaccionar, el DOM virtual siempre lo interpretará como si fuera el mismo elemento. Y por el bien de eso, tienes razón al establecer el índice como el "id" en general.

Hice un ejemplo de trabajo solo cambiando el índice / el (y estableciendo la posición del elemento en absoluta).

const {combineReducers, createStore} = Redux;
const { Provider, connect } = ReactRedux;

const ArrList = ({
  arr
}) => (
  <div>{
  arr.map((el, index)=>
          <div
            key={""+index}
            className={`element element-${el}` + ` index-${el}`}
            >
            {el}
          </div>) }
  </div>
)
      
const mapStateToArrList = (state) => {
  return {
    arr: state.appReducer.arr
  }
};

const App = connect(mapStateToArrList, null)(ArrList);

const initialState = {
  arr: [1, 2, 3, 4]
}

const appReducer = (state = initialState, action) => {
  switch(action.type) {
    case "tick":
      return {
        ...state,
        arr: _.shuffle(state.arr)
      }
    default:
      return state
   }
}

const reducer = combineReducers({
  appReducer
})


const store = createStore(reducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById(''root'')
)

const dispatcher = () => {
  store.dispatch({
     type: "tick"
  })
  setTimeout(dispatcher, 1000)
}

dispatcher()

.element {
    position: absolute;
    height: 20px;
    background: green;
    margin-left: 20px;
    margin-top: 20px;

    text-align: right;
    color: white;
    line-height: 20px;

    transition: all 1s ease-in;
    -moz-transition: all 1s ease-in; /* Firefox 4 */
    -webkit-transition: all 1s ease-in; /* Safari 和 Chrome */
    -o-transition: all 1s ease-in; /* Opera */

}

.element-1 {
    width: 20px;
}

.element-2 {
    width: 40px;
}

.element-3 {
    width: 60px;
}

.element-4 {
    width: 80px;
}

.index-1 {
  top: 20px;
}

.index-2 {
  top: 40px;
}

.index-3 {
  top: 60px;
}

.index-4 {
  top: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.js"></script>

<div id="root"></div>

Answer 4

Si está eliminando el elemento del DOM virtual, la reacción actualizará su contenido, por lo que no verá las animaciones. Lo que puede hacer es usar el react-transition-group O decirle a su aplicación que espere x ms antes de actualizar el dominio una vez que se llame el evento O use la visibilidad para alternar entre oculto y mostrar en lugar de eliminarlo completamente del DOM.