我将这个animation添加到收藏夹按钮,这个工作正常,但是当我重新加载页面时,动画再次运行,这会对列表页面造成干扰。那么如果点击收藏夹按钮一次并且事物已成为最爱,我怎样才能控制或停止页面重新加载动画。
CSS代码:
.event_box .eb_like i:after{
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
margin: 0 auto;
background: url(../img/alike.svg) 0 0 no-repeat;
background-size: 2900%;
height: 100px;
width: 100px;
}
.event_box .eb_like i.like:after{
-webkit-animation: heart-burst steps(28) 0.8s 1 both;
animation: heart-burst steps(28) 0.8s 1 both;
}
@-webkit-keyframes heart-burst {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
@keyframes heart-burst {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
答案 0 :(得分:1)
实际上,一种可能的解决方案是将密钥存储在浏览器的本地存储中。你可以这样做:
https://jsfiddle.net/pablodarde/vojrcoa4/
var btn = document.getElementsByClassName('btn-love')[0];
btn.addEventListener('click', function(e) {
if (!window.localStorage.getItem('favorited')) {
setTimeout(function() {
document.getElementsByClassName('love')[0].setAttribute('id', '');
window.localStorage.setItem('favorited',true);
},1000);
}
});
答案 1 :(得分:0)
你无法用css做到这一点,有两种方法都涉及一些编码: