Je construis un site GatsbyJS avec Material-UI. En utilisant withStyles HoC, est-il possible de faire une animation clignotante? J'ai essayé de fournir une animation dans 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'],
}
})
Je peux voir que la classe et les images clés sont reconnues et que headerGT a la méthode d'animation lorsque le DOM est construit, mais l'animation ne se déclenche pas. Des idées?
Oui, c'est tout à fait possible. Par exemple:
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',
},
});
J'ai eu le même problème mais comme spécifié dans le JSS docs , référencer mon animation avec le préfixe $ l'a résolu.
Essaye ça :
const style = theme => (
{
'@keyframes blinker': {
from: {opacity: 1},
to: {opacity: 0}
},
headerGT: {
[...]
animationName: '$blinker',
animationDuration: '1s',
animationTimingFunction: 'linear',
animationIterationCount:'infinite',
},
});
Voici un exemple d'animation clignotante qui peut être activée ou désactivée en fonction de l'accessoire désactivé du composant:
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>
)
}
Notez qu'il existe 2 classes distinctes car seule animationPlayState dépend de la valeur de l'hélice. Cependant, animationName
doit être déclaré dans un objet car @material-ui
va mapper sur l'objet et remplacer $flicker
avec le nom de l'animation qui a un hachage généré aléatoirement (c'est-à-dire makeStyles-keyframes-flicker-4043
). Le mappage ne se produit pas pour l'objet renvoyé par la fonction qui a été invoquée avec des accessoires.