React：Framer Motion / onClick 仅激活动画

Question

我正在尝试使用 Framer Motion 为图像制作动画：

utils/MonkeyPicture.js

import React from 'react';

const MonkeyPic = () => {

        return (
            <div>               
                  <img
                    transition={{ duration: 0.5 }}
                    animate={{ rotate: [0, -30, 0]}}
                    id='monkeyFace'
                    src='/images/Monkey.png' />
                               
            </div>);         
}
export default MonkeyPic;

所以我需要一个只添加或激活属性的函数：过渡={{持续时间：0.5}} 动画={{旋转：[0，-30，0]}} 当我点击一个按钮时。

图片一直在渲染，我只想点击按钮时旋转。

onClick 方法在 AddTodo.js 容器中：

            <button id='addTodo' onClick={() => {
                monkeySound.play(); 
                setShowFistBump(true);
                setTimeout(() => { 
                    setShowFistBump(false);
                }, 1000);

Answer 1

您可以使用 variants，例如：

// At first you need to pass `rotate` prop to MonkeyPic component inside your AddTodo
// You can use existing showFistBump state for that

<MonkeyPic rotate={showFistBump} />

// ...

// Then switch animation variant depending on that `rotate` prop

const variants = {
  rotate: { rotate: [0, -30, 0], transition: { duration: 0.5 } },
  // You can do whatever you want here, if you just want it to stop completely use `rotate: 0`
  stop: { y: [0, -10, 0], transition: { repeat: Infinity, repeatDelay: 3 } }
};

const MonkeyPic = ({ rotate }) => {
  return (
    <div>
      <motion.img
        variants={variants}
        animate={rotate ? 'rotate' : 'stop'}
        id="monkeyFace"
        src="/images/Monkey.png"
      />
    </div>
  );
};

Codesandbox link: https://codesandbox.io/s/httpsWhosebugcomquestions63864386-rd1xh?file=/src/utils/MonkeyPicture.js

React：Framer Motion / onClick 仅激活动画

React: Framer Motion / onClick activate only the animation

components

reactjs

framer-motion