React Tranisition组过渡动画无法退出

维维克

过渡动画可根据高度进入,但退出animaiton时不起作用。初始高度为'0px',在输入将高度更改为包装器高度后,然后在输入状态下将高度设置为'自动'。过渡动画在这里起作用。

exit之前,将height再次设置为包装器高度,然后在退出高度上更改为'0px'。过渡动画在这里不起作用。

但是,当在onExit方法上设置断点时,它可以工作

https://codesandbox.io/s/hopeful-grass-gp6v9?file=/src/App.js

阿马里什SM

只需将现有的过渡样式高度更改为auto,过渡现在就可以正常工作了。

const transitionStyle = {
    entered: { height: "auto", overflow: "visible" },
    exiting: { height: "auto" }  /*change this */
  };

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

动画从图像数组过渡?

来自分类Dev

React-Spring-更改过渡动画速度

来自分类Dev

基于媒体查询的React Spring动画/过渡

来自分类Dev

初始页面加载时的react-router过渡动画

来自分类Dev

调试React CSS过渡

来自分类Dev

如何使用React Material UI的过渡组件来动画化将项目添加到列表?

来自分类Dev

当使用动态键包裹在 div 中时,React Collapse 过渡不会动画

来自分类Dev

当动画在 react-spring 中过渡时组件捕捉效果?

来自分类Dev

React Native,NavigationExperimental动画

来自分类Dev

React中的图片动画

来自分类Dev

React Native,NavigationExperimental动画

来自分类Dev

React Native点动画

来自分类Dev

无法使用React Spring设置THREE.js属性的动画

来自分类Dev

无法使用react-spring动画html进度

来自分类Dev

React Native:使用react-native-reanimated的动画无法很好地表现视图的高度

来自分类Dev

CSS动画:过渡无法反向进行

来自分类Dev

用React JS制作动画

来自分类Dev

react-dnd中的动画

来自分类Dev

如何隐藏动画?React + SCSS

来自分类Dev

React-native - 动画 MapViewMarker

来自分类Dev

无法解析“ ./react”

来自分类Dev

无法导入React主题

来自分类Dev

无法识别React脚本?

来自分类Dev

React 无法识别函数

来自分类Dev

为动画React Native重置动画

来自分类Dev

无法在React Router + FIrebase中划分已登录屏幕和已退出屏幕

来自分类Dev

React-native 启动画面和 react-navigation

来自分类Dev

容器在ECS中通过react app退出

来自分类Dev

登录/退出React路由和ExpressJS路由