CSS过渡速记具有多个属性?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (4)
  • 关注 (0)
  • 查看 (136)

我无法找到具有多个属性的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;
}

在最新版本的Chrome,FireFox和Safari上面进行测试时,我用javascript添加了show类。元素级别变得更高、可见,它只是没有转换。

我做错什么了?

注: 为了代码简洁明了,我使用了一个简写版本,以简化我的CSS代码。原来的代码的前缀太多了而且还扩展了示例代码。

提问于
用户回答回答于

语法

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

请注意,如果指定了后面的参数,则必须在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;

这是一个简单的例子这是另一个具有延迟(delay)特性...

编辑:以前在这里列出的是兼容性和已知的相关问题transition删除以提高可读性。

底线(bottom-line):可以使用它。该属性的性质对所有应用程序都是无损的,并且兼容性在全球范围内已经超过94%。

如果您还想深入了解,请参阅 http://caniuse.com/css-transitions

用户回答回答于

我认为这是可行的:

element{
   transition: all .3s;
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
用户回答回答于

属性不透明性过渡有5秒的延迟,该元素将完全透明(不可见),整个时间的高度正在过渡。你唯一能看到的就是不透明度的变化。所以你会得到和除高度属性一样的效果:

"transition: opacity .5s .5s;"

这就是你想要的吗?如果不是,你想要看到高度的转变,在这段时间里,你的透明度不能为零。

用户回答回答于

如果你有几个特定的属性你想要以同样的方式进行转换(因为你也有一些属性而且你不想过渡,比如说opacity),还可以这样做(为了简洁起见 省略前缀):

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

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

演示

所属标签

可能回答问题的人

  • 天使的炫翼

    15 粉丝531 提问35 回答
  • 旺仔小小鹿

    社区 · 运营 (已认证)

    48 粉丝0 提问27 回答
  • 富有想象力的人

    2 粉丝0 提问26 回答
  • 发条丶魔灵1

    6 粉丝525 提问25 回答

扫码关注云+社区

领取腾讯云代金券