在 React 中为图像变化添加动画答案

【问题标题】：Adding animation to image change in React在 React 中为图像变化添加动画
【发布时间】：2022-12-28 14:13:07
【问题描述】：

我一直在尝试在 React 中实现更改图像 onclick。我有 3 张图像堆叠在一起，我正在做的是更改图像的 src 属性。尽管功能本身运行正常，但我无法添加过渡动画。我试图让 smth 与照片上的相似

基于以下事实，我遇到了一些解决方案：动画仅在第一次渲染组件时播放一次，并且为了重新渲染图像元素，我不得不为图像分配“键”属性，但它没有不适合我。但是，我可能会弄错。

我将不胜感激任何形式的帮助:)

以下是相关代码部分：

const [activeImage, setActiveImage] = useState(1);



const nextImg = () => {
activeImage === 5 ? setActiveImage(1) : setActiveImage(activeImage+1)
}

const prevImg = () => {
activeImage === 1 ? setActiveImage(5) :setActiveImage(activeImage-1)
}


<div className="frame">
        <img key={activeImage} className="current-image" src={`/src/assets/images/${activeImage}.jpg`} />            
        <img key={activeImage + 1} className="next-image" src={`/src/assets/images/${activeImage === 5 ? activeImage-4 : activeImage + 1}.jpg`} />
        <img key={activeImage + 2} className="next-2-image" src={`/src/assets/images/${activeImage === 4 || activeImage === 5 ? activeImage-3 : activeImage + 2}.jpg`} />
    </div>`

      <button className='left' onClick={prevImg}><Arrow /></button>
      <button className='right' id='right' onClick={nextImg}><Arrow /></button>

【问题讨论】：

标签： javascript reactjs image animation

【解决方案1】：

你不能像那样使用图像，您应该先导入，示例代码如下：

import A from './img/pictureA.png'
function App() {
    return (
        <div>
            <img src={A} alt='I am A' width={'200px'}/>
        </div>
    )
}

因此，您可以像这样更改代码（请记住更改图片编号）。


import pic1 from '../src/assets/images/1.jpg'
import pic2 from '../src/assets/images/2.jpg'
import pic3 from '../src/assets/images/3.jpg'

<div className='frame'>
                    <img
                        key={activeImage}
                        className='current-image'
                        src={pic1}
                        alt=''
                    />
                    <img
                        alt=''
                        key={activeImage + 1}
                        className='next-image'
                        src={`${activeImage === 5 ? pic1 : pic2}`}
                    />
                    <img
                        alt=''
                        key={activeImage + 2}
                        className='next-2-image'
                        src={`${
                            activeImage === 4 || activeImage === 5 ? pic3 : pic1
                        }`}
                    />
                </div>

【讨论】：