手机购物车添加动画
¥('.access_digital .add','click',function(){
var icoimg_btn = $(this).parents(".wtxt").siblings(".icoimg"),
wh = $(window).height(),//是文档窗口高度
ot = icoimg_btn.offset().top,
ds = document.body.scrollTop,// ds = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
icoimg_h = icoimg_btn.height();
bh = wh - icoimg_h - [ot - ds ];
icoimg_btn.css({ bottom:bh,right:"50px" });
cur = $(this).parents(".wtxt").siblings(".icoimg");
cur.addClass("cur");
setTimeout(function(){
$(".cur").removeClass("cur");
cur.removeAttr("style");
},800);
});
css:
@keyframes ico{
0% {
opacity:1;
}
100%{
bottom:0;
left:3%;
width: 0.1px;
height: 0.1px;
}
}
@-webkit-keyframes ico{
0% {
opacity:1;
}
100%{
bottom:0;
left:3%;
width: 0.1px;
height: 0.1px;
}
}
.icoimg{
@include rounded(35px);
@extend %pa;
bottom:10px;
left:75%;
z-index:999;
opacity:0;
width: 35px;
height: 35px;
&.cur{
@extend %block;
position:fixed;
opacity:1;
}
&.cur:not(:target){
-webkit-animation-name: ico;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
animation-name: ico;
animation-duration:1s;
animation-iteration-count: 1;
}
}
浙公网安备 33010602011771号