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

Question

我正在处理一些基本的 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 类吗？提前致谢!

Answer 1

关于这里可能出了什么问题，有一个非常重要的提示，那就是在您的 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不设置该属性。

这里有一些可能的解决方案。最简单的方法之一涉及两个步骤:

1. 更改 #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>

1. 调整您的 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;
}

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