CSS：左、右定位的过渡

Question

所以我有一个从右侧滑出的汉堡菜单，我想把我的菜单滑开<div>，以防止重叠（它们的不透明度都<1，所以看起来很奇怪）。

无论如何，我在使用以下代码时使用jQuery更改left + right值，转换效果很好

transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;

但是，我还为正在移动的 div 使用了淡入淡出动画，并且由于某种原因正在触发。基本上是闪烁，然后在进入屏幕时慢慢淡入。所以，我想做如下事情：

transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
transition: right .3s ease-in-out;
-webkit-transition: right .3s ease-in-out;

结果：右侧按预期工作，但左侧只是跳转到新位置，而右侧仍在动画中。知道我做错了什么吗？这是整个 css 类

aboutScreen{
  position: absolute;
  text-align: center;
  height: 100%;
  top: 0;
  left: 150px;
  right: 150px;
  background-color: rgba(0, 0, 0,0.7);

  transition: left .3s ease-in-out;
  -webkit-transition: left .3s ease-in-out;
  transition: right .3s ease-in-out;
  -webkit-transition: right .3s ease-in-out;
}

注意：如果你想要 JQuery，请告诉我

Answer 1

您的原始代码有以下几行：

transition: left .3s ease-in-out;
-webkit-transition: left .3s ease-in-out;
transition: right .3s ease-in-out;
-webkit-transition: right .3s ease-in-out;

在 CSS 中，当同一个属性被多次定义时，旧的值将被覆盖。

这就是为什么你只能得到right但没有的过渡效果left。

幸运的是，CSS 允许在一个属性定义中嵌套多个值。

.aboutScreen {
  position: absolute;
  text-align: center;
  height: 100%;
  top: 0;
  left: 150px;
  right: 150px;
  background-color: rgba(0, 0, 0,0.7);

  /* Original 
  transition: left .3s ease-in-out;
  -webkit-transition: left .3s ease-in-out;
  transition: right .3s ease-in-out;
  -webkit-transition: right .3s ease-in-out;
  */

  /* Corrected */
  -webkit-transtition: left .3s ease-in-out, right .3s ease-in-out;
  transition: left .3s ease-in-out, right .3s ease-in-out;
}

PS：

如果您想让您的代码更具可读性，您还可以执行以下操作：

transition-property: left, right;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
transition-delay: 0s;

附注 2：

通常最好将非前缀属性放在最后，因为它是浏览器应该使用的“真实”属性（换句话说，“标准化”）。

浏览器前缀如-webkit-、-moz-、-ms-和的目的-o-是迎合当时不正式支持该属性的浏览器版本。

因此，当在非前缀属性之后设置前缀属性时，浏览器将使用前缀定义，从而呈现有时非标准化的行为。