实现收藏/取消收藏动效

最新推荐文章于 2024-07-10 10:14:49 发布

joe_324

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量546

点赞数

文章标签： css

本文链接：https://blog.csdn.net/joe_324/article/details/120708877

版权

<!-- 初始化未选中 -->
<span class="empty"></span>
<!-- 初始化已选中 -->
<!-- <span class="fill"></span> -->
<!-- 点击选中 -->
<!-- <span class="to-fill"></span> -->
<!-- 点击取消选中 -->
<!-- <span class="to-empty"></span> -->

$(".content").on("click","span",function(){
	if($(this).hasClass("empty")){
		$(this).removeClass("empty");
		$(this).addClass("to-fill");
	}
	else if($(this).hasClass("fill")){
		$(this).removeClass("fill");
		$(this).addClass("to-empty");
	}
	else if($(this).hasClass("to-fill")){
		$(this).removeClass("to-fill");
		$(this).addClass("to-empty");
	}
	else{
		$(this).removeClass("to-empty");
		$(this).addClass("to-fill");
	}
})

.product-detail .product-detail-right .tips span {
  cursor: pointer;
  /* width: 42px;
     height: 42px; */
  width: 0.64rem;
  height: 0.64rem;
  display: inline-block;
}
.product-detail .product-detail-right .tips span.empty {
  background: url(../images/heart_animation1.png) no-repeat;
  background-position: left;
  background-size: cover;
}
.product-detail .product-detail-right .tips span.fill {
  background: url(../images/heart_animation2.png) no-repeat;
  background-position: left;
  background-size: cover;
}
.product-detail .product-detail-right .tips span.to-fill {
  background: url(../images/heart_animation1.png) no-repeat;
  background-position: left;
  animation-name: toFill;
  animation-duration: 0.8s;
  animation-iteration-count: 1;
  animation-timing-function: steps(31);
  background-position: right;
  background-size: cover;
}
@keyframes toFill {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
.product-detail .product-detail-right .tips span.to-empty {
  background: url(../images/heart_animation2.png) no-repeat;
  background-position: left;
  animation-name: toEmpty;
  animation-duration: 0.4s;
  animation-iteration-count: 1;
  animation-timing-function: steps(15);
  background-position: right;
  background-size: cover;
}
@keyframes toEmpty {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}