【问题标题】:Blink animation in MUIMUI 中的闪烁动画
【发布时间】: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 时具有动画方法,但动画没有触发。有什么想法吗?

【问题讨论】:

    标签: reactjs animation material-ui gatsby jss


    【解决方案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',
        },
    });
    

    【讨论】:

    【解决方案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 调用的函数返回的对象不会发生映射。

    【讨论】:

    【解决方案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`,
    });
    

    现场演示

    【讨论】:

    • 哟,有什么联系方式吗?
    猜你喜欢
    • 2012-10-16
    • 1970-01-01
    • 2011-12-02
    • 2012-03-12
    • 2011-03-30
    • 2011-08-23
    • 1970-01-01
    • 1970-01-01
    • 2017-03-09
    相关资源
    最近更新 更多