Question

我知道我可以使用逗号创建多个转换（例如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 :( */
    }
}

当然，问题与复杂的选择器相同，而不是媒体查询。

Answer 1

您提议的内容不起作用的原因是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总是从上到下读取，并使后面的规则优先于先前的规则。我认为这就是为什么在你的第一个例子中，高度过渡总是覆盖宽度过渡。它与查询无关 - 只是因为订单。

Answer 2

你可以使用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;
}

媒体查询的多个转换

2 个答案: