• 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 啦~

  • 相关阅读:
    类和对象
    数组
    随笔3
    设计把所有的奇数移动到所有偶数前面的算法
    选择排序
    队列的链式存储结构
    循环队列
    一起玩算法(把所有相同的数字后移)
    判断序列B是否是序列A的连续子序列
    power bi创建切片器导航
  • 原文地址:https://www.cnblogs.com/stooges/p/15257701.html
Copyright © 2020-2023  润新知