当我想使用CSS过渡/动画时，我如何得到一个提示来显示和消失?

我有一个Saved提示符，每当对表单进行内联编辑时都会显示该提示符。每当进行编辑时，我希望提示符以完全不透明度显示，然后在2秒内逐渐消失。我有一个额外的规定是，如果过渡/动画没有完全完成，提示再次被触发，我需要立即以完全不透明度重新显示提示(然后在2秒内再次淡出)。

我没有任何主要的浏览器限制，因为IE9是最低要求。

这是可能的使用CSS过渡/动画和JS的组合，如果是这样，我应该怎么做?

只是要注意，到目前为止，我已经尝试了多种方法，但它们似乎都有这样或那样的问题，所以我希望有人能教我一些解决这个问题的通用方法。

谢谢。

Edit: KatieK，感谢您的帮助，很抱歉回复晚了。我的代码基本上如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Animation example</title>
    <style>
      p {
        background: green;
        opacity: 0;
      }
      .show {
        -webkit-animation: fade_out 2s;
        -moz-animation: fade_out 2s;
        animation: fade_out 2s;
      }
      @-webkit-keyframes fade_out {
        0% {
          opacity: 1.0;
        }
        25% {
          opacity: 1.0;
        }
        100% {
          opacity: 0;
        }
      }
      @-moz-keyframes fade_out {
        0% {
          opacity: 1.0;
        }
        25% {
          opacity: 1.0;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fade_out {
        0% {
          opacity: 1.0;
        }
        25% {
          opacity: 1.0;
        }
        100% {
          opacity: 0;
        }
      }
      div {
        border: #000 solid 1px;
        height: 50px;
        width: 50px;
      }
    </style>
  </head>
  <body>
    <p id="prompt">Saved</p>
    <div id="editable" contenteditable="true">
    </div>
    <script>
      document.getElementById('editable').onblur = function () {
        document.getElementById('prompt').className = '';
        document.getElementById('prompt').offsetHeight;
        document.getElementById('prompt').className = 'show';
      };
    </script>
  </body>
</html>

我在几个网站上读到，一旦动画被触发，你就不能在不引起某种页面回流的情况下重新触发动画，这就是offsetHeight属性行所做的。

这个解决方案确实有效，但对我来说感觉很粗糙，所以我只是想知道是否有一种更可靠的方法来实现我想要的，这就是上面的代码所做的，但没有粗糙。

谢谢。

IE9不支持CSS3动画(http://caniuse.com/#feat=css-animation)，所以你需要JavaScript辅助。Modernizr或jQuery是比较流行的选项——具体使用哪一个取决于您的具体场景。

相关内容

最新更新

热门标签：