스타일이 지정된 구성 요소에서 @property 사용: 가이드

Question

애플리케이션에서 애니메이션을 사용하고 싶지만 SCSS에 @property 기능이 필요합니다.

으아아아

스타일 구성 요소에서 이 작업을 수행할 수 있는 방법이 있나요?

애니메이션의 전체 코드는 https://codepen.io/shshaw/pen/RwJwJJx

에 있습니다.

또는 property 함수를 사용할 필요가 없도록 이 함수를 다시 작성하는 방법은 무엇입니까?

Answer 1

테스트한 결과 게시된 코드는 styled-components 一起使用，尽管浏览器似乎支持 @property에서 작동하는 것 같습니다.

여전히 제한 사항이 있습니다. 예를 들어 Chrome에서는 작동하지만 현재 Firefox에서는 작동하지 않으므로 그라데이션 애니메이션이 재생되지 않습니다. @property < /a>을 사용하지 않고 게시된 코드의 대체 버전을 만들어 보았는데 Firefox에서도 작동합니다. 도움이 된다면 여기 데모를 보세요:

stackblitz

(답변 끝에 코드가 포함되어 있습니다). < /a>원래 게시된 코드는 다음 예제를 사용하여 테스트되었습니다: @propertystackblitz

(Firefox는 현재

에 대한 그라데이션 애니메이션을 지원하지 않습니다). @property 的替代版本进行比较，它使用伪元素并添加了子 div 来在 styled-components 으아악

여기에는 비교를 위해

가 없는 대체 버전이 있습니다. 이 버전은 의사 요소를 사용하고 하위 div를 추가하여 스타일 구성 요소에서 애니메이션을 다시 만듭니다. 라이브 데모:

stackblitz

(Firefox에서도 작동함). @property 是较新的标准 CSS。有关 @property 으아악 그건 그렇고, 는 최신 표준 CSS입니다. 에 대한 자세한 배경 정보는 🎜MDN🎜을 참조하세요. 🎜