web-dev-qa-db-ja.com

Material-UI JSSのアニメーションの点滅

Material-UIを使用して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'],
        }
    })

クラスとキーフレームが認識され、DOMのビルド時にheaderGTにアニメーションメソッドがあるのがわかりますが、アニメーションは起動しません。何か案は？

animationmaterial-uigatsbyjss
10
stan.codes

はい、可能です。例えば：

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',
    },
});
6
Denys Rusov

同じ問題がありましたが、 JSS docs で指定されているように、$プレフィックスでアニメーションを参照すると解決しました。

これを試して ：

const style = theme => (
{
    '@keyframes blinker': {
        from: {opacity: 1},
        to: {opacity: 0}
    },
    headerGT: {
            [...]
            animationName: '$blinker',
            animationDuration: '1s',
            animationTimingFunction: 'linear',
            animationIterationCount:'infinite',
    },
});
5
rguerin

以下は、コンポーネントの無効化されたプロップに基づいてオンまたはオフにできる点滅するアニメーションの例です。

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のみがプロップの値に依存しているため、2つの別個のクラスがあることに注意してください。ただし、animationNameはオブジェクト内で宣言する必要があります。これは、@material-uiがオブジェクトをマップし、$flickerをランダムに生成されたハッシュが付加されたアニメーションの名前（makeStyles-keyframes-flicker-4043）。プロップで呼び出された関数によって返されたオブジェクトのマッピングは行われません。

0
Mateja Petrovic