使用反应/减少照片长度的淡出效果

Question

如何为每张照片卡实现淡出效果，然后在淡出效果后减少照片的长度？这是链接： https: //codesandbox.io/s/pedantic-herschel-f12gq。我找到了解决方案，但当我按下每张照片时，该解决方案不起作用。有谁知道这些问题吗？

Answer 1

尝试这样：https: //codesandbox.io/s/serene-pine-ckph1在React中，修改组件的方式是根据它的props/state。单击图片容器时更新状态，然后使用它来添加类。图片.jsimport React, { Component } from "react";import "../css/utilities.css";import "../css/main.css";class Pictures extends Component {  constructor(props) {    super(props);    this.state = {      fadeOut: false    };    this.fadeOut = this.fadeOut.bind(this);  }  fadeOut() {    this.setState({ fadeOut: true }, function () {      setTimeout(function () {        document.getElementById("length").innerText--;      }, 200);    });  }  render() {    console.log(this.props.picture);    const { title, thumbnailUrl } = this.props.picture;    return (      <div        className={          "picture card container" + (this.state.fadeOut ? " fadeOut" : "")        }        onClick={(event) => this.fadeOut(event)}      >        <img src={thumbnailUrl} alt="" />        <h1 className="title">{title}</h1>      </div>    );  }}export default Pictures;然后该类使用 CSS 平滑地应用淡出效果：main.css.picture {  opacity: 1;  transition: opacity 0.2s linear;}.picture.fadeOut {  opacity: 0;}其他建议：上面的代码代替 jsonPlaceholder.js 运行，以更好地遵循框架约定并仅使用 CSS 进行样式设置在 HTML 中，每个idid="picture"属性必须是唯一的，因此如果有超过 1 个图片元素，则无法设置每个图像都应该有一个alt属性