디스플레이 속성에 애니메이션을 적용하고 싶습니다.

CSS 작업 그룹 몇 주 전에 엄지손가락을 치켜세웠어. 슈퍼 듀퍼 개념 제안은 우리가 애니메이션을 만들거나 전환할 수 있다는 것입니다. display: block 에 display: none.

설정 때문에 추론하는 것은 약간의 두뇌 비틀기입니다. display: none 요소에서 애니메이션을 취소합니다. 추가하면 애니메이션이 다시 시작됩니다. 사양에 따라:

설정 display 재산 none 요소와 그 자손에 적용된 실행 중인 애니메이션을 종료합니다. 요소에 없음 표시가 있는 경우 다음 이외의 값으로 표시 업데이트 none 에 의해 요소에 적용된 모든 애니메이션이 시작됩니다. animation-name 속성 및 자손에 적용되는 모든 애니메이션 display 이외의 none.

그 순환 행동은 개념이 도착하자마자 죽은 것처럼 보이게 만드는 것입니다. 하지만 if @keyframes 모두 지원 display 가치 이외의 none, 그럼 방법이 없습니다 none 취소하거나 다시 시작합니다. 그것은 비none 값 우선 순위, 허용 none 애니메이션이나 전환이 완료된 후에만 작업을 수행합니다.

미리암의 불다 (이것은 우리가 실제로 이것을 부르는 것입니다. 맞습니까?) 이것이 어떻게 작동하는지 설명합니다.

예를 들어, 우리는 정확히 보간하지 않습니다. block 및 none, 그러나 허용 block 물건이 움직이지 않고 적용하기에 안전할 때까지 그대로 유지 none. 이들은 키워드이므로 둘 사이에 명시적인 값이 없습니다. 따라서 이것은 별개의 애니메이션으로 남아 있습니다. 애니메이션이 완료되면 두 값 사이를 전환합니다.

이것은 로버트 플랙의 예는 바로 토론:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

이것은 첫 번째 프레임이 요소를 다음으로 설정하는 방법을 보여주기 때문에 유용한 예입니다. display: block, 기본보다 우선 순위가 부여됩니다. display: none 비로none 값. 이렇게 하면 애니메이션이 실행되고 완료될 수 있습니다. none 해결만 되기 때문에 프로세스에서 취소 또는 재설정 시간 내에 애니메이션.

다음은 마스토돈에서 언급한 미리암의 예입니다.

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

우리는 이번에 전환을 다루고 있습니다. 근본적인 display 값이로 설정 됨 none 어떤 일이 발생하기 전에 문서 흐름에서 완전히 벗어납니다. 이제 호버에서 이것을 전환한다면 다음과 같을 것입니다.

.hide:hover {
  display: block;
  opacity: 1;
}

...그러면 요소는 이론적으로 페이드 인해야 합니다. 200ms. 다시, 우리는 display 가치, 그러나 block 전환이 미리 취소되지 않고 나중에 실제로 적용되도록 우선 순위가 부여됩니다. opacity 전환을 마칩니다.

적어도 그것이 내 마음이 그것을 읽는 방식입니다. 정리해야 할 것이 많다고 생각하기 때문에 이러한 일을 생각하는 매우 똑똑한 사람들이 있다는 것이 기쁩니다. 예를 들어, 여러 애니메이션이 요소에 할당되면 어떻게 됩니까? none 그 중 하나를 재설정하거나 취소하시겠습니까? 무한 애니메이션, 역방향 및 기타 모든 종류의 모든 것이 제 시간에 해결될 것이라고 확신합니다.

하지만 정말 멋진 첫걸음!