首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >具有多个属性的CSS转换速记?

具有多个属性的CSS转换速记?
EN

Stack Overflow用户
提问于 2012-03-12 23:37:40
回答 7查看 496K关注 0票数 603

我似乎找不到具有多个属性的CSS transition 速记的正确语法。这不会做任何事情:

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

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2012-03-12 23:51:31

语法:

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

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

底线:使用它就行了。此属性的性质对所有应用程序都是不间断的,并且全球兼容性现在远高于94%。

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

票数 859
EN

Stack Overflow用户

发布于 2013-06-15 06:09:19

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

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

第二个声明覆盖了上面的速记声明中的all,使得(有时)代码更简洁。

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}
<p>Hover box for demo</p>
<div class="box"></div>

Demo

票数 508
EN

Stack Overflow用户

发布于 2018-04-19 19:45:04

我用下面的代码让它工作:

.element {
   transition: height 3s ease-out, width 5s ease-in;
}
票数 55
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9670075

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档