手机购物车添加动画

¥('.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%;
		 0.1px;
		height: 0.1px;
		
     }
 }

 @-webkit-keyframes ico{
	 0% {

		opacity:1;
		

     }

  

	 100%{
	 	bottom:0;
	 	left:3%;
		 0.1px;
		height: 0.1px;
		
     }
 }

.icoimg{
		
		@include rounded(35px);
		@extend %pa;
		bottom:10px;
		left:75%;
		z-index:999;
		opacity:0;
		 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;
			
			
		}

	
	}

  

原文地址:https://www.cnblogs.com/xupeiyu/p/4826745.html