css

css - 错误消息以背景颜色淡入

转载作者：行者123 更新时间：2023-11-28 17:39:27

不确定是否可以使用纯 CSS3..

用谷歌搜索答案，但他们有我不需要的悬停答案。

在用户单击带有空白字段的按钮之前，表单不会显示错误，然后它会淡入带有背景色(从浅色到原始色)的错误消息。

没有 JQuery，有什么简单的方法可以做到这一点吗？

<div class="msg">
      <g:if test="${flash.error}">
        <div class="error">${flash.error}</div>
      </g:if>
      </div>

CSS

 .error{
  background-color: #ff9696;
  color: red;
  padding: 15px 0;
  transition: 2 opacity 2s 3s ease-in;
}

一直在尝试使其在单击按钮且未填写字段时淡出。但它“不自然地”出现(如弹出)

最佳答案

参见 My Fiddle

为了使转换有效，您必须有一个起始状态才能转换。它不是纯 CSS，而是使用一些简单的 Javascript，您可以在文档加载时通过更改错误消息元素的 className 属性来触发转换。

示例 HTML

<body onload="showError();">
  <p class="error">Error!</p>

  <button class="error-button">Show Error</button>
</body>

.error{
  position:absolute;
  top:0px;
  height:20px;
  background:#ff9696;
  color:red;
}

.error.show {
  display:block;
  background:white;
  transition:background 1s ease-in;
}

.error-button {
  position:relative;
  margin-top:30px;
}

Javascript

var showError = function() {
  var err = document.getElementsByClassName("error")[0];

  if(err)
  {
    err.className = "error show";
  }
};

您可以稍微不同地实现 showError 函数来转换多个错误消息。这种方式仅适用于一条消息。请注意，我已将错误消息的 position 设置为 absolute 以防止其他元素在出现时四处移动。您可以通过注释掉或删除错误元素在 fiddle 中尝试此操作。

关于css - 错误消息以背景颜色淡入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24411443/

文章推荐： javascript - 使用jQuery setInterval同步css关键帧动画

文章推荐： css - 星级评分渲染而不是简单的 select_tag 下拉渲染

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 错误消息以背景颜色淡入

示例 HTML

CSS

Javascript