反应 CSSTransition 帮助。动画重置。而不是立即设置输入类

Question

我的反应代码

    import React from 'react'
import ReactDOM from 'react-dom'
import { CSSTransition } from 'react-transition-group'

import './styles.css';

const Fade = ({ children, ...props }) => (
  <CSSTransition
    {...props}
    timeout={600}
    classNames="slide-filter"
  >
    {children}
  </CSSTransition>
);

class FadeInAndOut extends React.Component {
    state = {
      show: false
    }

  render() {
    return (
      <div>
        <button onClick={() => this.setState((prevState) => {
          return { show: !prevState.show }
        })}>Toggle</button>
        <hr/>
      <Fade in={this.state.show}>
        <div className='greeting'>Hello world</div>
      </Fade>
      </div>
    )
  }
}

我的 CSS 类

.slide-filter-enter {
  transform: translateX(50%);
  opacity: 0;
  transition: all 0.6s ease-in;
  color:blue;
}
.slide-filter-enter-active {
  transform: translateX(0);
  color:red;
  opacity: 1;
}
.slide-filter-exit {
  transform: translateY(0);
  opacity: 1;
  color:red;
}
.slide-filter-exit-active {
  color:blue;
  transform: translateX(50%);
  transition: all 0.6s ease-in;
}

好的，我不明白为什么这不起作用。它只是在动画后重置为原始状态。

还有为什么“enter”或“enter-active”类在第一次呈现在屏幕上时没有应用？

Answer 1

所以你想让“Fade”组件的位置停留在动画的结束位置？如果这不是您正在寻找的行为，请原谅我，但请尝试删除第 10 行的 timeout={1000} 属性。