带有媒体查询的多个转换答案

【问题标题】：Multiple transitions with media queries带有媒体查询的多个转换
【发布时间】：2014-02-14 00:55:29
【问题描述】：

我知道我可以使用逗号创建多个过渡（例如 width 1s, height 1s），但是如果我想要在媒体查询中使用一个呢？

@media screen and (min-width: 800px) {
    #div {
        transition: width 1s;
    }
}
#div {
    transition: height 1s; /* Overrides previous one :( */
}

我怎样才能做到这一点？我是否必须求助于进行 2 个媒体查询（随着原始媒体查询的增加而呈指数增长）

@media screen and (max-width: 799px) {
    #div {
        transition: height 1s;
    }
}
@media screen and (min-width: 800px) {
    #div {
        transition: width 1s, height 1s; /* Ugly duplication :( */
    }
}

当然，复杂的选择器而不是媒体查询也会出现同样的问题。

【问题讨论】：

我不太明白。为什么不同的屏幕尺寸需要不同的过渡。请进一步解释。
@Steven 为什么不呢？我想要特定于不同布局的过渡。
不清楚你到底想区分这两种情况
@Mabedan 有关系吗？如果我问一个问题“如何使用 css 颜色”，那么你会问我为什么我想要那个元素是绿色的？
@Danield 那么媒体查询将覆盖一般规则。

标签： html css media-queries transition

【解决方案1】：

你可以使用 LESS 来做到这一点

https://github.com/less/less-docs/blob/master/content/features/merge.md

.mixin() {
  transition: height 1s;
}

@media screen and (max-width: 799px) {
    .mixin()
}


@media screen and (min-width: 800px) {
  .mixin();
  transition+: width 1s;
}

【讨论】：

好的，那行。有点像big，我没有使用 Node.js……哦，好吧。
你可以编译它。使用 Simpless、Codekit...等或命令行（需要本地机器上的节点）npm install lesslessc input.less output.ccs 然后您可以使用编译后的文件。我只为我的 CSS 使用预编译器，它使很多事情更容易维护

【解决方案2】：

您提议的内容不起作用的原因是，transition 与其他 CSS 属性一样，只能采用单个值。它没有计算较早的转换应用于width 的事实，因此height 的新转换可以扩展它。它替换整个值。这就是您获得覆盖的原因。

单个 transition 属性实际上是所有转换属性的简写：transition-property、transition-duration、transition-timing-function 和 transition-delay。因此，您可以只针对您要更改的部分：

#div {
    transition: height 1s;
}

@media screen and (min-width: 800px) {
    #div {
        transition-property: width, height;
    }
}

您仍然必须在覆盖中指定这两个属性，但它确实减轻了您在多个地方指定持续时间的麻烦。

还要注意顺序很重要。您需要先在文档中指定基本情况，然后再指定覆盖。 CSS 总是从上到下阅读，并赋予后面的规则优先于前面的规则。我认为这就是为什么在您的第一个示例中，高度过渡总是覆盖宽度过渡。它与查询无关——只是因为顺序。

【讨论】：

其实我大部分都是这样。您的解决方案不起作用，因为1s 时间只是一个示例，可以是任何东西。不知何故，CSS 将转换视为一个数组不是更好吗？
直到最近我还以为是。我想如果您将 CSS 属性视为单个值是有道理的，但它确实感觉应该是一个数组。