时间戳

首页 > 解决方案 > React-transition-group 过渡不会在退出时触发动画

css - React-transition-group 过渡不会在退出时触发动画

问题描述

我的目标是让一个图标旋转 90 度（变平），然后被另一个图标取代，创造一种硬币旋转的效果。

然后我想在进入和退出时旋转（由于 XHR 调用而存在延迟）。

出于某种原因，动画是在进入时触发的，而不是在退出时触发的。

这些是 3 侧类型，in状态是互斥的。

<div className={c.wrapper}>
  <Transition in={loading} timeout={allTransitions}>
    {state => (
      <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
        {(loading) && <SyncIcon className={c.loadingIcon} />}
      </div>
    )}
  </Transition>
  <Transition in={success} timeout={allTransitions}>
    {state => (
      <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
        {(success) && <SuccessIcon className={c.successIcon} />}
      </div>
    )}
  </Transition>
  <Transition in={fail} timeout={allTransitions}>
    {state => (
      <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
        {(fail) && <FailIcon className={c.failIcon} />}
      </div>
    )}
  </Transition>
</div>

以下是样式定义：

const duration = 1000
const allTransitions = {
  appear: duration,
  enter: duration,
  exit: duration
}
const easingFunction = 'ease-in-out'

const defaultStyle = {
  transition: `transform ${duration}ms ${easingFunction}`,
  transform: 'rotateY(90deg)',
  alignSelf: 'center'
}

const transitionStyles = {
  entering: { transform: 'rotateY(0deg)' },
  entered: { transform: 'rotateY(0deg)' },
  exiting: { transform: 'rotateY(90deg)' },
  exited: { transform: 'rotateY(90deg)' },
}

这是一个演示：https ://codesandbox.io/s/coin-state-indicator-3bnv4

标签： cssreactjsanimationreact-transition-group

解决方案

原因是在退出动画生效之前loading就变成了。false

  1. 您需要删除条件渲染。
  2. 更改所有过渡“位于”彼此顶部的 CSS

工作沙箱： https ://codesandbox.io/s/coin-state-indicator-elutx

推荐阅读