React：Framer Motion / onClick 仅激活动画答案

【问题标题】：React: Framer Motion / onClick activate only the animationReact：Framer Motion / onClick 仅激活动画
【发布时间】：2020-12-30 23:59:36
【问题描述】：

我正在尝试使用 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);

【问题讨论】：

CodeSandBox Link

标签： reactjs components framer-motion

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

代码沙盒链接：https://codesandbox.io/s/httpsstackoverflowcomquestions63864386-rd1xh?file=/src/utils/MonkeyPicture.js

【讨论】：