Ошибка с использованием transition-delay

Question

Я зацепился за некоторый код ранее и обнаружил, что он основан на задержке перехода, не применяемой к переходу, если его свойство было установлено до самого перехода.Мне было интересно, если это ошибка или ожидаемое поведение.

Я сделал небольшую ручку, чтобы показать пример того, что я имею в виду: https://codepen.io/itsharryfrancis/pen/pGBRBR

По сути, это показывает разницу между:

.test1 {
  .block {
    transition: background 1s;
    transition-delay: 1s;
  }
}

и

.test2 {
  .block {
    transition-delay: 1s;
    transition: background 1s;
  }
}

Полагаю, ожидается ли это из-за каскадной природы CSS?

Answer 1

так что вы столкнулись с известной проблемой с сокращенными свойствами.

transition в данном случае это сокращенное свойство

, которое я могу объяснить с помощью случаяmargin

, так что маржа - это сокращение для полей на полях сверху, справа на полях, на полях снизу и на полях слева

, поэтому, если вы сделаете

margin-top: 20px;
margin : 10px;

свойство полейна самом деле переопределяет поле margin-top;

в вашем случае transition переопределяет transition-delay

, об этом вы можете прочитать также на mdn https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases.см. дело №1

Answer 2

  .block {
    transition-delay: 1s;
    transition-property: background;
    transition-duration: 1s;
  }

нужно указать свойство и время