几秒钟后使用css3 react自动隐藏div/flash消息 [英] auto hide a div / flash message after few seconds using css3 react

问题描述

我是React环境的新手.我为书签功能编写了一个非常基本的组件.

I comparatively new to React environment .I have wrote a very basic component for bookmarking feature.

基本上单击收藏夹图标，

它发送一个ajax调用>在db>中创建一条记录在ajax成功时，显示一条闪烁消息页面已添加到收藏夹".

它是一个切换按钮，因此再次单击它时，

Its a toggle button, so upon clicking on it again ,

它发送一个ajax调用>删除db>中的记录在ajax成功的情况下，我显示一条Flash消息:从收藏夹中删除了页面."

这里是我编写的非常有效的组件.但是我不喜欢的是使用 setTimeOut 函数隐藏Flash消息.我跌倒了，好像必须有其他方法(可能是CSS)才能在React方法中实现相同的目标.

Here is the component i wrote which works perfectly. But what i do not like is, using the setTimeOut function to hide the flash message. I fell like there must be other way (may be css) to achieve the same in React way.

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>

推荐答案

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

You can use CSS3 animations to hide your element after the specified time. Since am not able to run and see your code output, am not able to give the exact code snippet. You can dynamically add classes on your request success (you can use the same way you currently use, or there is a npm package called classnames) that will add those animations to show and fade your element.

让我们举个例子:

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

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

this will execute the FadeAnimation for 1 second with the ease-in style after 0.2 seconds the class is attached.

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

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

这会将元素从可见状态转换为隐藏状态.您可以在动画的各个阶段之间添加内容，方法是根据希望出现的位置，以相应的百分比包括一些动画属性.您也可以类似地将其删除.

This will transition the element from visible state to hidden state. You can add in between stages to your animation, by including some animation properties at respective percentage based on which place you want it to occur. You can similarly do it for removal as well.

看看 CSS3动画

这篇关于几秒钟后使用css3 react自动隐藏div/flash消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！