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：

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

浏览器前缀的目的，如-webkit-，-moz-，-ms-和-o-是为了顾及不这样做，当时的浏览器版本，正式支持的特性。

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