애플리케이션에서 애니메이션을 사용하고 싶지만 SCSS에 @property 기능이 필요합니다.
스타일 구성 요소에서 이 작업을 수행할 수 있는 방법이 있나요?
애니메이션의 전체 코드는 https://codepen.io/shshaw/pen/RwJwJJx
또는 property 함수를 사용할 필요가 없도록 이 함수를 다시 작성하는 방법은 무엇입니까?
property
테스트한 결과 게시된 코드는 styled-components 一起使用，尽管浏览器似乎支持 @property에서 작동하는 것 같습니다.
styled-components
@property
여전히 제한 사항이 있습니다. 예를 들어 Chrome에서는 작동하지만 현재 Firefox에서는 작동하지 않으므로 그라데이션 애니메이션이 재생되지 않습니다. @property 을 사용하지 않고 게시된 코드의 대체 버전을 만들어 보았는데 Firefox에서도 작동합니다. 도움이 된다면 여기 데모를 보세요:
(답변 끝에 코드가 포함되어 있습니다). 원래 게시된 코드는 다음 예제를 사용하여 테스트되었습니다: @propertystackblitz
에 대한 그라데이션 애니메이션을 지원하지 않습니다). @property 的替代版本进行比较，它使用伪元素并添加了子 div 来在 styled-components 으아악
div
가 없는 대체 버전이 있습니다. 이 버전은 의사 요소를 사용하고 하위 div를 추가하여 스타일 구성 요소에서 애니메이션을 다시 만듭니다. 라이브 데모:
스타일 구성 요소
(Firefox에서도 작동함). @property 是较新的标准 CSS。有关 @property 으아악 그건 그렇고, 는 최신 표준 CSS입니다. p>에 대한 자세한 배경 정보는 🎜MDN🎜을 참조하세요. 🎜
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
테스트한 결과 게시된 코드는
styled-components一起使用，尽管浏览器似乎支持@property에서 작동하는 것 같습니다.여전히 제한 사항이 있습니다. 예를 들어 Chrome에서는 작동하지만 현재 Firefox에서는 작동하지 않으므로 그라데이션 애니메이션이 재생되지 않습니다.
stackblitz@property을 사용하지 않고 게시된 코드의 대체 버전을 만들어 보았는데 Firefox에서도 작동합니다. 도움이 된다면 여기 데모를 보세요:(답변 끝에 코드가 포함되어 있습니다). 원래 게시된 코드는 다음 예제를 사용하여 테스트되었습니다:
(Firefox는 현재@propertystackblitz에 대한 그라데이션 애니메이션을 지원하지 않습니다).
여기에는 비교를 위해@property的替代版本进行比较，它使用伪元素并添加了子div来在styled-components으아악가 없는 대체 버전이 있습니다. 이 버전은 의사 요소를 사용하고 하위
stackblitzdiv를 추가하여스타일 구성 요소에서 애니메이션을 다시 만듭니다. 라이브 데모:(Firefox에서도 작동함).
@property是较新的标准 CSS。有关@property으아악 그건 그렇고, 는 최신 표준 CSS입니다. p>에 대한 자세한 배경 정보는 🎜MDN🎜을 참조하세요. 🎜