在第二次加载页面时停止CSS动画

时间:2017-04-28 09:38:01

标签: html css css3 animation

我将这个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;
  }
}

2 个答案:

答案 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做到这一点,有两种方法都涉及一些编码:

  1. (简单)您可以通过js设置cookie并使用它来检查是否存在 元素已被点击
  2. (过于复杂)如果用户已登录,您可以将该操作保存在数据库中,当他重新加载页面时,检查数据库并打印相应的类