手机购物车添加动画
¥('.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; } }