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

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

基本上是点击喜爱的图标

它发送一个ajax调用>在数据库中创建一个记录>在ajax成功时显示一条flash消息“页面已添加到收藏夹。”

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

它发送一个ajax调用>删除数据库中的记录>在ajax成功时，我会显示一条flash消息“页面已从收藏夹中删除”。

下面是我编写的组件，它工作得非常好。但我不喜欢的是，使用

setTimeOut

函数隐藏flash消息。我觉得必须有其他的方法（可能是css）来实现同样的反应方式

import-React{
道具
}从"反应",；
进口{
组成部分
}来自“aplus基地”；
从“axios”导入axios；
常量API=”http://localhost:3000/favourites/toggle"
常数API2=”http://localhost:3000/favourites/current_bookmark_status"
@组成部分
导出默认类书签扩展React.Component{
静态样式=必需（'./bookmark.sass'）
状态={
已添加书签：“”，
消息：“”，
警告：错误
}
componentDidMount（）{
这是fetchData（）；
}
切换（）{
const querystring=require（'querystring'）
axios.post（API，querystring.stringify({
当前页面\键：'/marketing'
}), {
标题：{
“内容类型”：“应用程序/x-www-form-urlencoded”
}
})
。然后（响应=>{
这是我的国家({
书签：response.data.bookmarked，
警告：正确
});
const message=response.data.bookmarked？“添加到收藏夹”：“从收藏夹中删除”
这是我的国家({
消息
})
设置超时（（）=>{
这是我的国家({
警告：错误
});
}, 2000);
})
}
fetchData=（）=>{
const querystring=require（'querystring'）
axios.post（API2，querystring.stringify({
当前页面\键：'/marketing'
}), {
标题：{
“内容类型”：“应用程序/x-www-form-urlencoded”
}
})
。然后（响应=>{
这是我的国家({
书签：response.data.bookmarked
});
})
}
render（）{
报税表（<
div>
<
i类名称={
this.state.bookmarked？“图标书签”：“图标书签”
}
onClick={
this.toggle.bind（this）
}
/> <
div styleName={
`结果${this.state.alert？“显示警报”：“隐藏警报”}`
} > {
这个.state.message
} <
/div><
/div>
)
}
}

。图标显示：内联块宽度：30px高度：30px背景：无重复中心背景大小：包含垂直对齐：中间和图标书签背景图像：url（../assets/bookmark.png）转换：所有1s线性和图标书签背景图像：url（../assets/bookmark.png）过渡：全部1s线性。结果位置：固定顶部：0左侧：40%宽度：20%框大小：边框框填充：4px文本对齐：中心字体重量：粗体。警报显示不透明度：1；
过渡：所有250ms线性；
.警报隐藏不透明度：0；
过渡：所有250ms线性
您可以使用
CSS3动画
在指定时间后隐藏元素。由于我无法运行并查看您的代码输出，因此无法给出确切的代码片段。您可以在请求成功时动态添加类（您可以使用当前使用的相同方式，或者有一个名为
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;
  }
}

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

看一看
几秒钟后，我想用React显示一个覆盖图，并用css隐藏它，但我碰到了你的问题，所以我想向你展示一下我是如何制作的。“jefree sujit”的回答对我帮助很大

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

因此，在我的
render
方法中，我显示我的组件如下：

{ispostCompleted&&}

（此部分可能会有所不同，具体取决于您进行API调用的方式，我使用的是挂起/完成/拒绝属性，用于调用）

My
SuccessDisplay
组件使用
样式化组件
，实际上是覆盖：

// @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;

/@flow
从“React”导入React；
从“样式化组件”导入样式化；
从“皮肤”导入{BootstrapIcon}；
导出常量样式=styled.div`
.成功{
动画：隐藏动画0.6秒，0秒轻松；
可见性：隐藏；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
高度：100vh；
宽度：100vw；
背景色：rgba（0,0,0,0.3）；
z指数：100000；
.ok图标{
字体大小：50px；
游标：默认值；
不透明度：0.9；
位置：绝对位置；
最高：48%；
左：48%；
颜色：绿色；
保证金：0自动；
}
@关键帧隐藏动画{
0% {
不透明度：1；
能见度：可见；
}
100% {
不透明度：0；
可见性：隐藏；
}
}
}
`;
const SuccessDisplay=（）=>(
);
导出默认成功显示；

BootstrapIcon
正在呈现
react bootstrap
的图标

在这个css片段中处理
动画的方法是：
它将运行到