css - 将 CSS3 转换应用于某些媒体查询，但不是全部

Question

我正在使用以下 CSS 更改 DIV 的宽度:

div { width:100px; }

@media only screen and (min-width: 400px) {
    div { width:300px; }
}
@media only screen and (min-width: 600px) {
    div { width:500px; }
}

是否可以使用 CSS 过渡来设置宽度从 300 到 500 和从 500 到 300 的动画变化，而不使用动画从 100 到 300 和从 300 到 100 的变化？

JSFiddle

Answer 1

您可以将过渡放在最后一个媒体查询上 http://jsfiddle.net/T7A5v/1/

编辑:我明白你的意思，你可以试试这个: http://jsfiddle.net/T7A5v/2/诀窍是转换 min-width而不是 width本身。

div {
    background: red;
    width: 100px;
}

@media only screen and (min-width: 400px) {
    div {
        width: 300px;
        min-width: 300px;
        -webkit-transition: min-width 3s;
        -moz-transition: min-width 3s;
        -o-transition: min-width 3s;
        transition: min-width 3s;
    }
}

@media only screen and (min-width: 600px) {
    div {
        min-width: 500px;
        -webkit-transition: min-width 3s;
        -moz-transition: min-width 3s;
        -o-transition: min-width 3s;
        transition: min-width 3s;
    }
}