CSS 过渡、绝对定位和 React 过渡组的问题

Question

我正在处理一些基本的 FreeCodeCamp 挑战，并且我正在尝试使用 React Transition Group 来实现一些非常简单的动画。这是CodePen。

我遇到的问题是，我不知道如何让“报价卡”水平和垂直居中，并且让我的动画（我使用 React Transition Group 触发）执行翻译就可以了。我试图移动的元素 (#quote-box) 以以下 css 为中心：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

以下是我在过渡组中使用的“移动”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 类吗？提前致谢！

Answer 1

这里有一个非常重要的提示，说明这里可能出了什么问题，那就是在您的 CodePen 中，卡片成功地为它们的opacity 设置动画，但不是它们的transform。这告诉您某事正在按预期工作，只是不是所有的过渡。

因此，我们的第一步是调查发生的过渡。事实上，如果我们将 CSS 转换持续时间减慢到 20 秒，并将 <ReactTransitionGroup.CSSTransition> 超时也设置为 20 秒，并在转换发生时使用 devtools 检查元素 div#quote-box，我们会看到一些可疑的东西：

#quote-box 的 CSS 转换属性覆盖了.move-enter-active 的转换组转换属性（正如预期的那样 - 请参阅 CSS selector specificity）（您可以判断，因为.move-enter-active 中的transform 属性被划掉了）。换句话说，您的 CSS 转换组转换永远不会应用，但 opacity 转换不受影响，因为 #quote-box 没有设置该属性。

这里有一些潜在的解决方案。最简单的方法之一涉及两个步骤：

1. 将#quote-box 从一个 ID 更改为一个类 (.quote-box) - （无论如何，您绝对应该这样做，对于页面上的任何 ID 也是如此，因为您应该只拥有同名 ID 的单个实例在页面上，并且使用 CSS 过渡组，您将在某些时候至少有两个。）这也将确保您的 CSS 过渡组 .move-* 选择器具有适当的优先级。

// CSS
.quote-box {
  // etc
}

// JSX
<div className="quote-box" >
  {/* etc */}
</div>

1. 调整您的 CSS 以使用 calc() 函数来计算引号框的位置。这是因为通常您无法将带有transform(-50%, -50%) 的引用框居中和 同时使用transform(-200px, 0) 偏移它的位置以进行转换。为此，我们必须使用calc()同时结合both居中变换和过渡偏移，即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;
}

https://codepen.io/_jered/pen/KKPomVK