MUI 中的闪烁动画

Posted 2023-02-22

【中文标题】MUI 中的闪烁动画

【英文标题】：Blink animation in MUI

【发布时间】：2019-03-05 05:49:37

【问题描述】：

我正在使用 MUI 构建一个 GatsbyJS 站点。使用withStyles HOC，是否可以制作闪烁动画？ 我尝试在styles 中提供动画：

const styles = theme => (
        '@keyframes blinker': 
            from: opacity: 1,
            to: opacity: 0
        ,
        headerGT: 
            color: 'white',
            animation: ['blinker', '1s', 'linear', 'infinite'],
            '-webkit-animation': ['blinker', '1s', 'linear', 'infinite'],
            '-moz-animation': ['blinker', '1s', 'linear', 'infinite'],
        
    )

我可以看到类和关键帧被识别，headerGT 在构建 DOM 时具有动画方法，但动画没有触发。有什么想法吗？

【参考方案1】：

是的，很有可能。例如：

const style = theme => (

    '@keyframes blinker': 
        from: opacity: 1,
        to: opacity: 0
    ,
    headerGT: 
            position: 'absolute',
            width: '60px',
            height: '60px',
            right: 17,
            backgroundImage: 'url(https://cdn3.iconfinder.com/data/icons/common-4/24/ui-21-512.png)',
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'contain',
            border: 'none',
            bottom: '108px',
            opacity: '0.4',
            backgroundColor: 'red',
            animationName: 'blinker',
            animationDuration: '1s',
            animationTimingFunction: 'linear',
            animationIterationCount:'infinite',
    ,
);

【讨论】：

我试着做这个，但我不熟悉这种创建/使用样式对象的方式。你能告诉我哪里出了问题吗？ codesandbox.io/s/material-ui-flicker-animation-ebnmv?file=/src/…

【参考方案2】：

我遇到了同样的问题，但正如 JSS docs 中指定的那样，使用 $ 前缀引用我的动画解决了它。

试试这个：

const style = theme => (

    '@keyframes blinker': 
        from:  opacity: 1 ,
        to:  opacity: 0 ,
    ,
    headerGT: 
        [...]
        animationName: '$blinker',
        animationDuration: '1s',
        animationTimingFunction: 'linear',
        animationIterationCount: 'infinite',
    ,
);

【讨论】：

我认为这是使用钩子 makeStyles() 的有效方法。感谢您提供链接。

【参考方案3】：

下面是一个闪烁动画的例子，可以根据组件的 disabled 属性来开启或关闭：

import  makeStyles  from '@material-ui/core'

const useStyles = makeStyles(
  '@keyframes flicker': 
    from: 
      opacity: 1,
    ,
    to: 
      opacity: 0.7,
    ,
  ,
  flicker: 
    animationName: '$flicker',
    animationDuration: '1000ms',
    animationIterationCount: 'infinite',
    animationDirection: 'alternate',
    animationTimingFunction: 'ease-in-out',
  ,
  withAnimation: ( disabled :  disabled: boolean ) => (
    animationPlayState: disabled ? 'paused' : 'running',
  ),
);

const Component: React.FC< disabled > = () => 
  const  flicker, withAnimation   = useStyles( disabled )

  return (
    <div className=`$flicker $withAnimation`>Hello</div>
  )

请注意，由于只有 animationPlayState 依赖于 prop 的值，因此有 2 个单独的类。但是，animationName 必须在对象内声明，因为@material-ui 将映射对象并将$flicker 替换为附加了随机生成的哈希的动画名称（即makeStyles-keyframes-flicker-4043）。使用 props 调用的函数返回的对象不会发生映射。

【讨论】：

我在一个密码箱中为任何感兴趣的人制作了这个：codesandbox.io/s/material-ui-flicker-animation-ebnmv?file=/src/…

【参考方案4】：

在MUI v5中，您可以使用来自情感的keyframes 定义动画。

import  styled  from '@mui/material/styles';
import  keyframes  from '@mui/system';

const blink = keyframes`
  from  opacity: 0; 
  to  opacity: 1; 
`;

const BlinkedBox = styled('div')(
  backgroundColor: 'pink',
  width: 30,
  height: 30,
  animation: `$blink 1s linear infinite`,
);

现场演示

【讨论】：

哟，有什么联系方式吗？