几秒钟后使用 css3 react 自动隐藏 div / flash 消息

Question

我对 React 环境比较陌生。我为书签功能编写了一个非常基本的组件。

基本点击favourite icon，

it sends an ajax call > create a record in the db > on ajax success show a flash message "Page added to favourites."

它是一个切换按钮，所以再次点击它时，

it sends an ajax call > delete the record in the db > on ajax success i show a flash message "Page removed from favourites."

这是我编写的完美运行的组件。但我不喜欢的是，使用setTimeOut 函数隐藏flash 消息。我觉得必须有其他方式（可能是 css）才能以 React 方式实现同​​样的效果。

import React, {
  PropTypes
} from 'react';
import {
  Component
} from 'aplus-base';
import axios from 'axios';

const API = "http://localhost:3000/favourites/toggle"
const API2 = "http://localhost:3000/favourites/current_bookmark_status"

@Component
export default class Bookmark extends React.Component {
  static styles = require('./bookmark.sass')

  state = {
    bookmarked: '',
    message: "",
    alert: false
  }

  componentDidMount() {
    this.fetchData();
  }

  toggle() {
    const querystring = require('querystring')
    axios.post(API, querystring.stringify({
        current_page_key: '/marketing'
      }), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(response => {
        this.setState({
          bookmarked: response.data.bookmarked,
          alert: true
        });
        const message = response.data.bookmarked ? "Added to Favourites" : "Removed from Favourites"
        this.setState({
          message
        })
        setTimeout(() => {
          this.setState({
            alert: false
          });
        }, 2000);
      })

  }
  fetchData = () => {
    const querystring = require('querystring')
    axios.post(API2, querystring.stringify({
        current_page_key: '/marketing'
      }), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(response => {
        this.setState({
          bookmarked: response.data.bookmarked
        });
      })
  }

  render() {
    return ( <
      div >
      <
      i className = {
        this.state.bookmarked ? "icon icon-bookmarked" : "icon icon-bookmark"
      }
      onClick = {
        this.toggle.bind(this)
      }
      /> <
      div styleName = {
        `result ${this.state.alert ? "alert-shown": "alert-hidden"}`
      } > {
        this.state.message
      } <
      /div>     <
      /div>
    )
  }
}

.icon display: inline-block width: 30px height: 30px background: no-repeat center background-size: contain vertical-align: middle &.icon-bookmark background-image: url(../assets/bookmark.png) transition: all 1s linear &.icon-bookmarked background-image: url(../assets/bookmarked.png) transition: all 1s linear .result position: fixed top: 0 left: 40% width: 20% box-sizing: border-box padding: 4px text-align: center font-weight: bold .alert-shown opacity: 1;
transition: all 250ms linear;
.alert-hidden opacity: 0;
transition: all 250ms linear;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

您可以使用CSS3 animations 在指定时间后隐藏您的元素。由于无法运行并查看您的代码输出，因此无法给出确切的代码 sn-p。您可以在请求成功时动态添加类（您可以使用当前使用的相同方式，或者有一个名为 classnames 的 npm 包）将添加这些动画以显示和淡化您的元素。

让我们举个例子：

animation: FadeAnimation 1s ease-in .2s forwards;

这将在附加类 0.2 秒后以缓入样式执行 FadeAnimation 1 秒。

@keyframes FadeAnimation {
  0% {
    opacity: 1;
    visibility: visible;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

这会将元素从可见状态转换为隐藏状态。您可以在动画的各个阶段之间添加一些动画属性，方法是根据您希望它发生的位置以相应的百分比包含一些动画属性。您也可以类似地进行删除。

看看CSS3 Animations

Answer 2

我想在几秒钟后用 React 显示一个覆盖并用 css 隐藏它，我碰到了你的问题，所以我想我向你展示我是如何做到的。 @jefree-sujit 的回答对我帮助很大。

最终的结果是我们实际上是在显示一个隐藏的叠加层，然后通过 css 中的动画显示它，然后再次隐藏它。

所以，在我的 render 方法中，我这样展示我的组件：

{isPostFulfilled && <SuccessDisplay />}

（这部分可能会有所不同，具体取决于您进行 API 调用的方式，我使用 react-redux-fetch，因此我的调用获得了挂起/履行/拒绝的属性）。

我的SuccessDisplay 组件使用styled-components 并且实际上是覆盖：

// @flow
import React from 'react';
import styled from 'styled-components';
import { BootstrapIcon } from 'skin';

export const Styling = styled.div`
  .success {
    animation: hide-animation 0.6s ease-in 0s;
    visibility: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 100000;

    .ok-icon {
      font-size: 50px;
      cursor: default;
      opacity: 0.9;
      position: absolute;
      top: 48%;
      left: 48%;
      color: green;
      margin: 0 auto;
    }

    @keyframes hide-animation {
      0% {
        opacity: 1;
        visibility: visible;
      }

      100% {
        opacity: 0;
        visibility: hidden;
      }
    }
  }
`;

const SuccessDisplay = () => (
  <Styling>
    <div className="success">
      <BootstrapIcon icon="ok" className="ok-icon" />
    </div>
  </Styling>
);

export default SuccessDisplay;

BootstrapIcon 正在渲染 react-bootstrap 的字形图标。

在这个 css sn-p 中与 animation 的处理是： 它将使用ease-in 样式（在这0.6 秒内）为0.6 seconds 运行hide-animation，所有这些在样式加载后（立即）启动0 seconds。

重要的部分是在我们的初始样式中设置visibility: hidden，因为这是我们开始的地方和我们要去的地方。动画结束后（0.6 秒后），我们将回到最初的样式。

希望这对未来的人有所帮助！