我似乎无法找到具有多个属性的CSS转换简写的正确语法。这没有做任何事情:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

我用javascript添加了show类。元素变得更高和可见,它只是没有转换。在最新的Chrome, FF和Safari测试。

我做错了什么?

编辑:只是为了明确,我正在寻找速记版本,以缩小我的CSS。它包含了所有供应商前缀,已经足够臃肿了。还扩展了示例代码。


当前回答

通过在转换不透明属性时使用0.5 s的延迟,元素在其高度转换期间将是完全透明的(因此是不可见的)。你唯一能看到的就是不透明度的改变。所以你会得到和把height属性从过渡中去掉一样的效果:

"过渡:不透明度。5s。5s;"

这是你想要的吗?如果不是,你想看到高度的转变,你不能让不透明度在整个转变过程中为零。

其他回答

语法:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

注意,如果指定了延迟,则持续时间必须在延迟之前。

在简写声明中组合的单个转换:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

或者只是转换它们:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

这里有一个简单的例子。这是另一个具有延迟属性的。


编辑:前面列出的是关于转换的兼容性和已知问题。为了可读性,删除了。

底线是:使用它。该特性对所有应用程序都是稳定的,目前全球兼容性远高于94%。

如果你还想确定,请参考http://caniuse.com/css-transitions

如果你有几个特定的属性,你想以同样的方式转换(因为你也有一些属性,你特别不想转换,比如不透明度),另一个选择是这样做(为了简洁,省略了前缀):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

第二个声明覆盖上面的简写声明中的all,(偶尔)使代码更简洁。

/*前缀省略*/ .box { 身高:100 px; 宽度:100 px; 背景:红色; 箱影:红色0 0 5px 1px; 过渡:所有500毫秒轻松; /*注意:不过渡宽度*/ 过渡属性:高度,背景,框影; } .box:{徘徊 高度:50 px; 宽度:50 px; 盒子阴影:蓝色0 0 10px 3px; 背景:蓝色; } <p>演示的悬停框</p> < div class = "盒子" > < / div >

Demo

这帮助我理解/简化了我所需要的动画:

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

对象中的所有转换属性(duration, transition-timing-function等)都适用。的基类

通过在转换不透明属性时使用0.5 s的延迟,元素在其高度转换期间将是完全透明的(因此是不可见的)。你唯一能看到的就是不透明度的改变。所以你会得到和把height属性从过渡中去掉一样的效果:

"过渡:不透明度。5s。5s;"

这是你想要的吗?如果不是,你想看到高度的转变,你不能让不透明度在整个转变过程中为零。

我认为这是可行的:

.element {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}