首页 文章

CSS过渡速记有多个属性?

提问于
浏览
383

我似乎找不到具有多个属性的CSS转换 shorthand 的正确语法 . 这没有做任何事情:

.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 . 所有供应商前缀都足够臃肿 . 还扩展了示例代码 .

6 回答

  • 580

    CSS转换使用速记转换属性进行控制 . 这是配置转换的最佳方法,因为它可以更容易地避免参数列表的长度不同步,这可能非常令人沮丧,因为必须花费大量时间来调试CSS .

    您可以使用以下子属性控制转换的各个组件:

    • 过渡 property

    • 过渡期 - 持续时间

    • transition-timing-function

    • 过渡延迟

    简写CSS语法编写如下:

    div { transition: <property> <duration> <timing-function> <delay>; }

    注意:Transition -delay是一个可选属性 .

  • 8

    我用这个:

    element{
       transition : height 3s ease-out, width 5s ease-in;
    }
    
  • 2

    通过在转换不透明度属性时延迟.5s,元素在其高度转换的整个时间内将是完全透明的(因此是不可见的) . 所以你唯一能看到的就是不透明度的变化 . 因此,您将获得与将高度属性保留在转换之外相同的效果:

    “过渡:不透明度.5s .5s;”

    那是你想要的吗?如果没有,并且您想要查看高度转换,则在转换的整个过程中不能具有零不透明度 .

  • -4

    如果你想要以相同的方式转换几个特定的属性(因为你也有一些特别不希望转换的属性,比如 opacity ),另一个选择就是做这样的事情(为简洁起见省略了前缀):

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

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

    Demo

  • 318

    句法:

    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;
    

    这是a straightforward example . 这是另一个with the delay property .


    此前列出的 Edit: 是关于 transition 的兼容性和已知问题 . 删除以方便阅读 .

    底线:只需使用它 . 对于所有应用程序,此属性的性质不会中断,并且全球的兼容性现在远高于94% .

    如果您仍想确定,请参阅http://caniuse.com/css-transitions

  • 0

    我认为这个工作:

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

相关问题