Question

我想要的是一个简单的动画，当路线改变时隐藏元素。我检查了有关此问题的所有其他问题，似乎没有任何帮助。

 <ReactCSSTransitionGroup
  transitionName="NavbarAnimation"
  transitionAppear
  transitionAppearTimeout={1000}
  transitionLeaveTimeout={1000}
>

  <Navbar key="Navbar" />

</ReactCSSTransitionGroup>

我在这里添加了CSS：

.NavbarAnimation-leave{
   opacity: 1;
   transform: translateY(0);
}
.NavbarAnimation-leave.NavbarAnimation-leave-active{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1000ms ease-out;
    position: absolute;
}

但是更改路线后它不起作用。该组件只是因为被删除而消失了，而不是慢慢上升。

EDIT我在一个论坛上的某个地方读到它已被弃用（？），我应该改用https://www.npmjs.com/package/react-transition-group。但这并不能解决问题。

编辑2：问题已解决，该视频帮助了我https://www.youtube.com/watch?v=53Y8q-SgLF0

基本上，我需要向CSSTransition插入一个唯一的key元素，并将位置变量传递给Switch路由。现在一切看起来像这样：

<Route redirect={({ location }) => (
  <TransitionGroup>
   <CSSTransition
    key={location.key}
    timeout={1000}
    classNames="Animation"
    appear
    exit
  >
   <Switch location={location}>
    <Route path="/yourroute1" component={component1} />
    <Route path="/yourroute2" component={component2} />
   </Switch>
  </CSSTransition>
 </TransitionGroup>
)}
/>

ReactCssTransitionGroup离开动画不适用于React Router

0 个答案: