我正在处理一些基本的 FreeCodeCamp 挑战,我正在尝试使用 React Transition Group 来实现一些非常简单的动画。这是 CodePen .
我遇到的问题是我无法找到如何让“报价卡”水平和垂直居中,以及如何让我的动画(我正在使用 React Transition Group 触发)执行翻译就可以了。我尝试移动的元素 (#quote-box
) 以以下 css 为中心:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
这是我在 Transition Group 中使用的“移动”CSS 类:
.move-enter {
opacity: 0.01;
transform: translate(-200px, 0);
}
.move-enter-active {
opacity: 1;
transform: translate(0, 0);
transition: all 500ms ease-in 200ms;
}
.move-exit {
opacity: 1;
transform: translate(0, 0);
}
.move-exit-active {
opacity: 0.01;
transform: translate(200px, 0);
transition: all 500ms ease-in 200ms;
}
我假设我应该将 transition
属性设置为 left
而不是 all
,但我有点迷茫正在阻止运动发生。我还应该有一个具有适当定位的 move-exited
和 move-entered
类吗?提前致谢!
最佳答案
关于这里可能出了什么问题,有一个非常重要的提示,那就是在您的 CodePen 中,卡片成功地为其 opacity
设置了动画。但不是他们的transform
.这告诉您某些正在按预期工作,只是不是所有过渡。
因此,我们的第一步是调查发生的转变。实际上,如果我们将 CSS 过渡持续时间减慢到 20 秒并设置 <ReactTransitionGroup.CSSTransition>
超时也为 20 秒,并检查元素 div#quote-box
使用 devtools 随着过渡的发生,我们看到了一些可疑的东西:
#quote-box
的 CSS 转换属性正在覆盖 .move-enter-active
的过渡组转换属性(正如预期的那样 - 请参阅 CSS selector specificity )(您可以看出,因为 transform
中的 .move-enter-active
属性被划掉了)。换句话说,您的 CSS 过渡组变换永远不会应用,但是 opacity
过渡不受影响,因为 #quote-box
不设置该属性。
这里有一些可能的解决方案。最简单的方法之一涉及两个步骤:
- 更改
#quote-box
从一个 ID 到一个类(.quote-box
)-(无论如何你绝对应该这样做,并且对于页面上的任何 ID 也是如此,因为你应该在页面上只有一个相同命名 ID 的实例,并且使用 CSS transition group 你在某些时候至少会有两个。)这也将确保你的 CSS transition group.move-*
选择器将具有适当的优先级。
// CSS
.quote-box {
// etc
}
// JSX
<div className="quote-box" >
{/* etc */}
</div>
- 调整您的 CSS 以使用
calc()
计算报价框位置的函数。这是因为通常您无法将transform(-50%, -50%)
置于引号框的中心。 和 用transform(-200px, 0)
偏移它的过渡位置同时。为此,我们必须使用calc()
将两者中心变换和同时结合到过渡偏移,即transform: translate(calc(-50% - 200px), -50%);
:
.move-enter {
opacity: 0.01;
transform: translate(calc(-50% - 200px), -50%);
}
.move-enter-active {
opacity: 1;
transform: translate(-50%, -50%);
transition: all 500ms ease-in 200ms;
}
.move-exit {
opacity: 1;
transform: translate(-50%, -50%);
}
.move-exit-active {
opacity: 0.01;
transform: translate(calc(-50% + 200px), -50%);
transition: all 500ms ease-in 200ms;
}
关于javascript - CSS 过渡、绝对定位和 React 过渡组的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57863462/