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的方式实现相同的目标。

＆＃13;

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>
    )
  }
}

＆＃13;

.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;

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用CSS3 animations在指定时间后隐藏元素。由于无法运行并查看您的代码输出，因此无法提供确切的代码段。您可以在请求成功时动态添加类（您可以使用当前使用的相同方式，或者有一个名为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代码段中与animation的交易是：它将使用hide-animation样式（在0.6秒内）运行0.6 seconds的{{1}}，并且在加载样式后立即在ease-in中启动所有这些。 / p>

重要的一点是在我们的初始样式中设置0 seconds，因为这是我们从哪里开始以及我们要去的地方。在动画结束后（0.6秒后），我们将重新回到我们的初始风格。

希望这有助于将来的某个人！

几秒钟后使用css3 react

2 个答案: