搜尋

首頁  >  問答  >  主體

在樣式化元件中使用@property:指南

我想在我的應用程式中使用動畫,但它需要 SCSS 中的 @property 函數:

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

有沒有辦法在樣式元件中做到這一點?

動畫的完整程式碼位於:https://codepen.io/shshaw/pen/RwJwJJx

#或如何重寫這個函數,使其不必使用 property 函數?

P粉808697471P粉808697471230 天前387

全部回覆(1)我來回復

  • P粉132730839

    P粉1327308392024-03-29 12:39:50

    正如我測試的那樣,發布的程式碼似乎確實可以與styled-components 一起使用,儘管瀏覽器似乎支援@property 仍然受到限制,例如它適用於Chrome,但目前不適用於Firefox,因此不會在其上播放漸變動畫。

    我嘗試建立所發布程式碼的替代版本,而不使用 @property,它也可以在 Firefox 上運行。如果它有用,這裡有一個演示: stackblitz< /a> (程式碼包含在答案末尾)。

    原始發布的程式碼已使用以下範例進行了測試:stackblitz< /a> (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 中重新建立動畫。

    現場演示: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

    回覆
    0
  • 取消回覆