飞入购物车动画

155 阅读1分钟

		/**
		 * 飞入购物车动画
		 */
                 
                 this.toCart(传入标签,比方说vue2中this.$refs.xxx.$el)
                 
		toCart(evt) {
			let rect = evt.getBoundingClientRect() //商品的位置
			let left = rect.left; //购物车 right
			let top = rect.top; //购物车 top

			let bar = document.createElement('div');
			bar.style.position = 'fixed';
			bar.style.left = left + 'px';
			bar.style.top = top + 'px';
			bar.style.width = '20px';
			bar.style.height = '20px';
			bar.style.borderRadius = '50%';
			bar.style.backgroundColor = '#02b6fd';
			bar.style.transition = 'left .6s linear, top .6s cubic-bezier(0.5, -0.5, 1, 1)';
			document.body.appendChild(bar)
			// 添加动画属性
			setTimeout(() => {
				let cart = this.$refs.selectedCondition.$refs.btn;
				let cartRect = cart.getBoundingClientRect();
				bar.style.left = (cartRect.left + cartRect.width / 2) + 'px'
				bar.style.top = (cartRect.top) + 'px'
			}, 0);
			/**
			 * 动画结束后,删除自己
			 */
			bar.ontransitionend = function () {
				this.remove()
			}
		},