jquery - 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;
}

附言:

如果你想让你的代码更具可读性，你还可以这样做:

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

附注 2:

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

-webkit-、-moz-、-ms-、-o-<等浏览器前缀的作用 是为了迎合当时不正式支持该属性的浏览器版本。

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