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

Question

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

Answer 1

尝试这样：https: //codesandbox.io/s/serene-pine-ckph1

在React中，修改组件的方式是根据它的props/state。单击图片容器时更新状态，然后使用它来添加类。

图片.js

import 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属性