如何在反应组件上进行背景颜色过渡？

Posted 2023-02-22

【中文标题】如何在反应组件上进行背景颜色过渡？

【英文标题】：How to make background's color transition on a react component?

【发布时间】：2018-01-23 00:04:09

【问题描述】：

我只是想在页面中发布新消息时设置背景淡出动画。

我只想改变背景。从蓝色到不透明度 0。

在页面中实时添加新帖子时的基本动画。

我试过这个但是不行，当我添加消息时，背景颜色仍然是蓝色。

我正在使用结合 SASS/Compass 的 reactJS

<div className="successfully-saved"><Message /></div>

.successfully-saved
  background-color:blue;
  @include transition(opacity, 1s ease-out);

感谢您的帮助

【问题讨论】：

保存成功的是帖子还是主页？

所以基本上你想显示消息，一旦保存帖子就会淡出（隐藏）消息。对吧？

@hunzaboy 只有帖子组件

@Dev 实际上我设置了我的应用程序，以便在提交表单后，组件直接附加到页面中而无需任何刷新，但我需要制作动画淡出以让用户知道添加了一些新鲜内容。

@Johndoe，我已经添加了答案。

【参考方案1】：

假设您想在成功添加新帖子时淡出/隐藏消息。您可以更改 div 的样式并将不透明度设置为 0。像这样。希望这会有所帮助。

let msgEl = document.getElementById('msg');

//To add post successfully, I am just using setTimeout. It may vary in your case.
setTimeout(function() 
   msgEl.innerhtml = "Post Successfully Added";
   msgEl.style.backgroundColor = 'transparent';
, 1000)

.successfully-saved
    background-color: blue;
    -webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */
    transition: background-color 2s;

<div id="msg" class="successfully-saved"></div>

【讨论】：

嘿！感谢您。我正在寻找这样的东西。但是我需要只为背景颜色操作不透明度过渡。因为通过使用这个例子，我的整个组件消失了。我怎样才能解决这个问题 ？谢谢。

您不想隐藏消息？我已经更新了答案。

非常感谢！完全按预期工作。我不能希望有更好的结果。谢谢你的帮助。解决了！