84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我想在我的應用程式中使用動畫,但它需要 SCSS 中的 @property 函數:
@property --border-angle { syntax: "<angle>"; inherits: true; initial-value: 0turn; }
有沒有辦法在樣式元件中做到這一點?
動畫的完整程式碼位於:https://codepen.io/shshaw/pen/RwJwJJx
#或如何重寫這個函數,使其不必使用 property 函數?
property
正如我測試的那樣,發布的程式碼似乎確實可以與styled-components 一起使用,儘管瀏覽器似乎支援@property 仍然受到限制,例如它適用於Chrome,但目前不適用於Firefox,因此不會在其上播放漸變動畫。
styled-components
@property
我嘗試建立所發布程式碼的替代版本,而不使用 @property,它也可以在 Firefox 上運行。如果它有用,這裡有一個演示: stackblitz (程式碼包含在答案末尾)。
原始發布的程式碼已使用以下範例進行了測試:stackblitz (Firefox 目前不支援 @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 ( ); }
下面是沒有@property 的替代版本進行比較,它使用偽元素並添加了子div 來在styled-components 中重新建立動畫。
div
現場演示:stackblitz(也應該有效)對於火狐瀏覽器)。
// 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 ( ); }
@property 是較新的標準 CSS。有關 @property 的更多背景信息,請參見 MDN。 p>
正如我測試的那樣,發布的程式碼似乎確實可以與
styled-components
一起使用,儘管瀏覽器似乎支援@property
仍然受到限制,例如它適用於Chrome,但目前不適用於Firefox,因此不會在其上播放漸變動畫。我嘗試建立所發布程式碼的替代版本,而不使用
@property
,它也可以在 Firefox 上運行。如果它有用,這裡有一個演示: stackblitz (程式碼包含在答案末尾)。原始發布的程式碼已使用以下範例進行了測試:stackblitz (Firefox 目前不支援
@property
的漸層動畫)。下面是沒有
@property
的替代版本進行比較,它使用偽元素並添加了子div
來在styled-components
中重新建立動畫。現場演示:stackblitz(也應該有效)對於火狐瀏覽器)。
順便說一句,@property
是較新的標準 CSS。有關@property
的更多背景信息,請參見 MDN。 p>