Edited at

Material-UIでアニメーション

ReactのUIフレームワークとして有名なMaterial-UI(v4)でCSSアニメーションを行います。

withStyle内にクラスとしてcss transitionおよびcss animationを定義できます。


css transition

参考:Custom CSS transitions with React Material UI

css transitionを定義するにはtheme.transitions.createを使います。

第一引数には変化するCSS属性を指定します。第二引数にはアニメーション時間を指定します。


RainbowButton.jsx

import React from 'react'

import { withStyles } from '@material-ui/core'
import Button from '@material-ui/core/Button'

const RainbowButton = withStyles(theme => ({
root: {
color: theme.palette.common.white,
fontWeight: 'bold',
textShadow: `2px 2px 4px ${theme.palette.common.black}`,
fontSize: 32,
background: 'linear-gradient(100deg, red, yellow, lightgreen, aqua, blue, pink, magenta)',
filter: 'saturate(90%)',
transition: theme.transitions.create(
['opacity'],
{ duration: theme.transitions.duration.complex }
),
'&:hover': {
opacity: 0.7,
},
},
}))(({classes, className, ...props}) => <Button className={[classes.root, className].join(' ')} {...props} />)

export default RainbowButton


マウスオーバーすると半透明になります。


css animation

$アニメーション名でアニメーション名を指定します。

MUI-v4以前の場合は$をつけません。


New.jsx

import React from 'react'

import { withStyles } from '@material-ui/styles'
import { red } from '@material-ui/core/colors'

let New = ({children, classes}) => (
<div className={classes.root}>
<div className={classes.new}>New</div>
{children}
</div>
)

New = withStyles((theme) => ({
root: {
position: 'relative',
},
new: {
position: 'absolute',
top: -20,
left: 0,
color: red[500],
fontSize: 24,
fontWeight: 'bold',
transform: 'rotateZ(15deg)',
textShadow:
`1px 1px 0.5px ${theme.palette.grey[300]},
-1px 1px 0.5px
${theme.palette.grey[300]},
1px -1px 0.5px
${theme.palette.grey[300]},
-1px -1px 0.5px
${theme.palette.grey[300]}`,
animation: '$newAnimation 1s ease infinite alternate',
},
'@keyframes newAnimation': {
'0%': {transform: 'rotateZ(-15deg) scale(1.0)'},
'100%': {transform: 'rotateZ(-15deg) scale(1.3)'},
},
}))(New)

export default New


Newの文字がアニメーションします。


withStyleにprops経由でパラメータを渡す

v4からpropsからの情報をwithStyleで参照できるようになりました。

次のようにアロー関数の戻り値形式で指定します。

opacity: props => props.opacity || 0.8,


RainbowButton2.jsx

import React from 'react'

import { withStyles } from '@material-ui/core'
import Button from '@material-ui/core/Button'

const RainbowButton = withStyles(theme => ({
root: {
color: theme.palette.common.white,
fontWeight: 'bold',
textShadow: `2px 2px 4px ${theme.palette.common.black}`,
fontSize: 32,
background: 'linear-gradient(100deg, red, yellow, lightgreen, aqua, blue, pink, magenta)',
filter: 'saturate(90%)',
transition: theme.transitions.create(
['opacity'],
{ duration: theme.transitions.duration.complex }
),
'&:hover': {
opacity: props => props.opacity || 0.8,
},
},
}))(({classes, className, ...props}) => <Button className={[classes.root, className].join(' ')} {...props} />)

export default RainbowButton