我想在我的應用程式中使用動畫,但它需要 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>