Rumah > Soal Jawab > teks badan
Saya mahu menggunakan animasi dalam aplikasi saya tetapi ia memerlukan fungsi @property dalam SCSS:
@property --border-angle { syntax: "<angle>"; inherits: true; initial-value: 0turn; }
Adakah terdapat cara untuk melakukan ini dalam komponen gaya?
Kod lengkap animasi terletak di: https://codepen.io/shshaw/pen/RwJwJJx
Atau bagaimana untuk menulis semula fungsi ini supaya ia tidak perlu menggunakan fungsi property
?
P粉1327308392024-03-29 12:39:50
Seperti yang saya uji, kod yang disiarkan nampaknya berfungsi dengan styled-components
一起使用,尽管浏览器似乎支持 @property
Masih terdapat pengehadan, mis. ia berfungsi pada Chrome, tetapi bukan Firefox pada masa ini, jadi animasi kecerunan tidak akan dimainkan padanya.
Saya cuba mencipta versi alternatif bagi kod yang disiarkan tanpa menggunakan @property
dan ia juga berfungsi pada Firefox. Jika ia membantu, berikut ialah demo: stackblitz< /a> (kod disertakan di hujung jawapan).
Kod asal yang disiarkan telah diuji menggunakan contoh berikut: stackblitz< /a> (Firefox tidak menyokong animasi kecerunan untuk @property
pada masa ini).
// Styled components const Container = styled.div` height: 100%; background: #223; display: grid; place-items: center; `; const Box = styled.div` --border-size: 3px; --border-angle: 0turn; width: 60vmin; height: 50vmin; background-image: conic-gradient( from var(--border-angle), #213, #112 50%, #213 ), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03); background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover; background-position: center center; background-repeat: no-repeat; animation: bg-spin 3s linear infinite; @keyframes bg-spin { to { --border-angle: 1turn; } } &:hover { animation-play-state: paused; } @property --border-angle { syntax: ""; inherits: true; initial-value: 0turn; } `; export default function App() { return ( ); }
Berikut ialah versi alternatif tanpa @property
的替代版本进行比较,它使用伪元素并添加了子 div
来在 styled-components
sebagai perbandingan, yang menggunakan elemen pseudo dan menambahkan div
anak untuk mencipta semula animasi dalam komponen gaya
.
Demo Langsung: stackblitz (juga harus berfungsi untuk Firefox).
// Styled components const Container = styled.div` min-height: 100vh; background: #223; display: grid; place-items: center; `; const Box = styled.div` width: 60vmin; height: 50vmin; position: relative; overflow: hidden; &::before { content: ""; position: absolute; inset: 0; background-image: conic-gradient(from 0turn, transparent 20%, #08f, #f03); animation: fallback-spin 3s linear infinite; } @keyframes fallback-spin { to { transform: scale(1000%) rotate(1turn); } } &:hover::before { animation-play-state: paused; } &:hover > div::before { animation-play-state: paused; } `; const Fallback = styled.div` position: absolute; inset: 3px; overflow: hidden; background-color: pink; &::before { content: ""; position: absolute; inset: 0; background-image: conic-gradient(from 0turn, #213, #112 50%, #213); animation: fallback-spin 3s linear infinite; } @keyframes fallback-spin { to { transform: scale(1000%) rotate(1turn); } } `; export default function App() { return (By the way,); }
@property
是较新的标准 CSS。有关 @property
ialah CSS standard yang lebih baharu. Untuk latar belakang lanjut tentang , lihat MDN p>. 🎜