Question

我的React代码

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

好的，我无法理解为什么这不起作用。它只是在动画制作后重置为原始状态。

为什么＆＃34;进入＆＃34;或＆＃34;进入活跃＆＃34;第一次在屏幕上呈现时，类是否未应用？

Answer 1

所以你想要＆＃34; Fade＆＃34;的位置。组件留在动画的最终位置？请原谅我，如果这不是您正在寻找的行为，但请尝试删除第10行的timeout={1000}道具。

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

1 个答案: