javascript - 单击加载 CSS 元素？

Question

我有一个“正在加载”元素，我想在用户单击按钮时显示它。查看JsFiddle .

我正在尝试弄清楚是否可以在用户单击按钮时加载此 CSS 动画。我试图延迟 CSS 的加载，但这并没有完成我所追求的。如何更改我的代码以使其在单击时加载动画？

body { min-height: 100%; background: tomato }
h1 {
  position: absolute;
  left: 50%;
  margin-left: -1.9em;
  color: beige;
  font: 800 900% Baskerville, 'Palatino Linotype', Palatino, serif;
}
h1:before {
  position: absolute;
  overflow: hidden;
  content: attr(data-content);
  color:#34495e;
  max-width: 4em;
  -webkit-animation: loading 5s linear;
}
@-webkit-keyframes loading {
  0% {
    max-width : 0
  }
}

<h1 data-content="Loading Results">Loading Results</h1>

Answer 1

试试下面的代码，也可以看看我的 5 分钟 CSS 动画介绍 http://www.coding-dude.com/wp/web-design/css/5-min-css-animation-beginner-tutorial/

var loadButton = document.getElementById("load");
var title = document.getElementById("title");
loadButton.addEventListener("click",function(e){
  e.preventDefault();
  title.classList.toggle("loading");  
})

body { min-height: 100%; background: tomato }
h1 {
    position: absolute;
    left: 50%;
    margin-left: -1.9em;
    color: beige;
    font: 800 900% Baskerville, 'Palatino Linotype', Palatino, serif;
}
h1:before {
    position: absolute;
    overflow: hidden;
    content: attr(data-content);
    color:#34495e;
    max-width: 4em;
}

.loading:before{
  -webkit-animation: loading 5s linear;  
}
@-webkit-keyframes loading {
    0% {
        max-width : 0
    }
}

<button id="load">start loading</button>
<h1 id="title" data-content="Loading Results">Loading Results</h1>