Question

我有一个＆＃34; loading＆＃34;我想在用户单击按钮时显示的元素。请参阅JsFiddle。

我试图弄清楚当用户点击按钮时是否可以加载此CSS动画。我试图延迟加载CSS，但这并没有实现我之后的目标。如何更改我的代码以使其在点击时加载动画？

＆＃13;

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
  }
}

＆＃13;

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

＆＃13;

Answer 1

您可以像这样更改代码

function addClass(){
document.getElementById("head").className = "load";
}

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;
}
.load {
    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 id="head" data-content="Loading Results">Loading Results</h1>
<input type="button" value="click" onclick="addClass()">

Answer 2

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

＆＃13;

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

＆＃13;

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
    }
}

＆＃13;

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

＆＃13;

点击加载CSS元素？

2 个答案: