Menggunakan @property dalam komponen gaya: panduan

Question

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?

Answer 1

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 (kod disertakan di hujung jawapan).

Kod asal yang disiarkan telah diuji menggunakan contoh berikut: stackblitz (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>. 🎜