Question

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

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

表单不会显示错误，直到用户单击带有空字段的按钮，然后它将淡入带有背景颜色的错误消息（从浅色到原始）。

没有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;
}

一直试图让它在点击按钮时显示淡出而字段没有填写。但它出现了＃34;不自然＆＃34; （像弹出一样）

Answer 1

请参阅My Fiddle

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

示例HTML

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

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

CSS

.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，以防止其他元素出现时移动。您可以通过注释掉或删除错误元素来在小提琴中尝试这个。

Answer 2

在纯CSS中无法实现此目的。如果你试图避免JQuery完全看到here有关问题的一个有趣的解决方案修改CSS文件

Answer 3

如果使用绝对位置，您可以轻松更改z-index和不透明度，使其返回并淡入淡出。这是通过javascript思想实现的，如果没有jQuery，它就不容易了，反之亦然。

错误消息淡入背景颜色

3 个答案:

示例HTML

CSS

的Javascript