Question

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

我遇到的问题是我找不到如何使“ quote card”水平和垂直居中放置，也无法让我的动画（我正在使用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，我们会看到一些可疑的地方： / p>

您的#quote-box的CSS变换属性正在覆盖.move-enter-active的过渡组变换属性（按预期-请参见CSS selector specificity）（您可以知道，因为transform被删除）。换句话说，您的CSS过渡组转换永远不会应用，但是.move-enter-active不会受到影响，因为opacity没有设置该属性。

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

将#quote-box从一个ID更改为一个类（#quote-box）-（无论如何，对于页面上的任何ID，您都绝对应该这样做，因为您只能有一个以下实例：在页面上具有相同的命名ID，并且在CSS过渡组中有时会至少有两个。）这还将确保CSS过渡组.quote-box选择器具有适当的优先级。

.move-*

调整CSS以使用// CSS .quote-box { // etc } // JSX <div className="quote-box" > {/* etc */} </div>函数来计算报价框的位置。这是因为通常您无法将calc() 置于报价框的中心，并且在transform(-50%, -50%)过渡时，偏移其位置。为此，我们必须使用transform(-200px, 0)来同时组合居中变换和的两者和过渡偏移，即calc()：

transform: translate(calc(-50% - 200px), -50%);

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

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

1 个答案: