reactjs - How to override the transition of drawer?
问题描述
I have two drawers (left and bottom). When the left drawer opens, I want to increase marginLeft and reduce the width of bottom drawer with transition/animation.
I try to add inline transition style to the paper of drawer. But the style will then replaced by element.style {transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;}
<Drawer
...
classes={{
paper: classes.transitionIn,
}}
...
PaperProps = {{
style:{
...
transition: 'transform 990ms cubic-bezier(0, 0, 0.2, 1) 0ms',
}
}}
>
{children}
</Drawer>
Is there any way to add animation to the bottom drawer?
解决方案
我只是找到了一种方法来覆盖根节点的过渡样式,方法是向 Drawer 的 SlideProps 添加回调函数(onEntering)。
<Drawer
...
classes={{
paper: classes.transitionIn,
}}
...
SlideProps = {{
onEntering: (node, isAppearing)=>{
node.style.webkitTransition = theme.transitions.create(['-webkit-transform', 'margin', 'height', 'width', 'top', 'left'], {
easing: theme.transitions.easing.easeOut,
duration: transitionTime,
});
node.style.transition = theme.transitions.create(['transform', 'margin', 'height', 'width', 'top', 'left'], {
easing: theme.transitions.easing.easeOut,
duration: transitionTime,
});
},
}}
PaperProps = {{
style:{
...
}
}}
>
{children}
</Drawer>
推荐阅读
- logging - Pentaho Data Integration 9 摆脱无用的日志行
- python - 迭代多维 Numpy 数组并除以
- laravel - 在自定义队列文件上设置 Laravel 队列优先级
- c++ - std::regex_match 引发堆栈溢出
- asp.net - 发布到 Azure 时,Area 中的 ASP.NET Core 文件夹未加载资产
- python - RuntimeError:在导入 dtale 和一个应用程序 (FLASK) 的请求上下文之外工作
- reactjs - 为什么 offsetLeft & offsetTop 总是返回 0?
- android-emulator - Android模拟器(adb devices -l)未经授权的错误
- swagger - 在 net5 web api 中升级 Swashbuckle 后如何使用 SwaggerResponse?
- python - 从 mypy 检查中排除文件夹