transition 默认值的坑

 一般的 mix 写法

transition: 3000ms opacity, 5000ms max-height;

 分开的写法

transition-duration: 3000ms, 5000ms;
transition-property: opacity, max-height;

使用 mix 的写法,游览器会自动给默认值

 transition 分为 2 组,每一组被拆成 4 个属性(property, duration, timing-function, delay)

如果没有声明,就会使用默认值(比如: ease, 0s)

问题来了, 我现在需要延迟 1 秒,再执行 opacity,等到 opacity 执行完后,再执行 max-height, 请问哪个做法是对的? 

  选项 1
  transition-duration: 3000ms, 5000ms;
  transition-property: opacity, max-height;
  transition-timing-function: ease-in-out, ease;
  transition-delay: 1000ms, 5000ms;

  选项 2
  transition-duration: 3000ms, 5000ms;
  transition-property: opacity, max-height;
  transition-timing-function: ease-in-out;
  transition-delay: 1000ms;

答案是 2 个都可以,

我们会认为选项 2 最后 2 个 值是没有给的,游览器会自动给默认值,如下

  transition-duration: 3000ms, 5000ms;
  transition-property: opacity, max-height;
  transition-timing-function: ease-in-out, ease;
  transition-delay: 1000ms, 0s;

  

结果你让游览器自动自己给默认值,和自己放默认值,结果是不一样……

这里我基本上没找到线索,不过看起来是 bug 啦~

原文地址:https://www.cnblogs.com/stooges/p/15257701.html