Maison > Questions et réponses > le corps du texte
Je souhaite utiliser l'animation dans mon application mais cela nécessite la fonction @property dans SCSS :
@property --border-angle { syntax: "<angle>"; inherits: true; initial-value: 0turn; }
Existe-t-il un moyen de faire cela dans un composant de style ?
Le code complet de l'animation se trouve sur : https://codepen.io/shshaw/pen/RwJwJJx
Ou comment réécrire cette fonction pour qu'elle n'ait pas besoin d'utiliser la fonction property
?
P粉1327308392024-03-29 12:39:50
Comme je l'ai testé, le code publié semble fonctionner avec styled-components
一起使用,尽管浏览器似乎支持 @property
Il y a encore des limitations, par exemple, il fonctionne sur Chrome, mais pas sur Firefox actuellement, donc l'animation de dégradé ne sera pas jouée dessus.
J'ai essayé de créer une version alternative du code publié sans utiliser @property
et cela fonctionne également sur Firefox. Si cela peut vous aider, voici une démo : stackblitz< /a> (code inclus à la fin de la réponse).
Le code initialement publié a été testé à l'aide de l'exemple suivant : stackblitz< /a> (Firefox ne prend actuellement pas en charge les animations dégradées pour @property
).
// 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 ( ); }
Voici une version alternative sans @property
的替代版本进行比较,它使用伪元素并添加了子 div
来在 styled-components
à titre de comparaison, qui utilise des pseudo-éléments et ajoute un div
enfant pour recréer l'animation dans des styled-components
.
Live Demo : stackblitz (devrait également fonctionner pour 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 (À propos,); }
@property
是较新的标准 CSS。有关 @property
est le CSS standard le plus récent. Pour plus d'informations sur , voir MDN p>. 🎜