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;

PS 2：

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

浏览器前缀的目的，如-webkit-，-moz-，-ms-和-o-，是为了满足当时没有正式支持该属性的浏览器版本。

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