Utilisation de @property dans des composants stylisés : un guide

Question

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粉132730839 · Answer

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 (code inclus à la fin de la réponse).

Le code initialement publié a été testé à l'aide de l'exemple suivant : stackblitz (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 (
    
      
        
      
    
  );
}