Question

我有一个已保存提示，只要对表单进行内联编辑，就会显示该提示。每当进行编辑时，我希望提示以完全不透明度显示，然后在2秒内淡出。我有一个额外的规定是，如果过渡/动画没有完全完成并且再次触发提示，我需要立即重新显示具有完全不透明度的提示（然后在2秒内再次淡出）。

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

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

请注意，到目前为止，我尝试过多次让我在那里的事情，但他们似乎都有一个问题，所以我希望这个问题有一些共同的解决方案，有人可以讨好教我。

谢谢。

修改：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属性行的作用。

这个解决方案确实有效，但它对我来说真的很烦人，所以我只是想知道是否有更坚实的方法来实现我想要的，这就是上面的代码所做的，但没有黑客。

谢谢。

Answer 1

IE9不支持CSS3动画（http://caniuse.com/#feat=css-animation），因此您需要JavaScript辅助功能。 Modernizr或jQuery是流行的选项 - 使用它取决于您的确切场景。

当我想使用CSS过渡/动画时，如何获得显示和淡出的提示？

1 个答案: