礼物条选择弹窗动画样式,及左右快速滑动选择特效

发表于 2020-11-18 15:01:54   |   下载附件   |   字体:
动画效果transition过渡动画当元素拥有CSS动画效果时用JS改变其CSS属性left时响应非常缓慢


HTML

<div class="gifts" id="giftTipsWrap">
	<ul>
		<li>
			<img src="https://img.hrloo.com/uc/avatar/000/00/50/88_avatar_original.jpg?v=65&w=44&h=44">
		</li>
		<li>
			<img src="https://img.hrloo.com/uc/avatar/000/00/50/88_avatar_original.jpg?v=65&w=44&h=44">
		</li>
		<li>
			<img src="https://img.hrloo.com/uc/avatar/000/00/50/88_avatar_original.jpg?v=65&w=44&h=44">
		</li>
		<li>
			<img src="https://img.hrloo.com/uc/avatar/000/00/50/88_avatar_original.jpg?v=65&w=44&h=44">
		</li>
		<li>
			<img src="https://img.hrloo.com/uc/avatar/000/00/50/88_avatar_original.jpg?v=65&w=44&h=44">
		</li>
		<li>
			<img src="https://img.hrloo.com/uc/avatar/000/00/50/88_avatar_original.jpg?v=65&w=44&h=44">
		</li>
		<li>
			<img src="https://img.hrloo.com/uc/avatar/000/00/50/88_avatar_original.jpg?v=65&w=44&h=44">
		</li>
		<li>
			<img src="https://img.hrloo.com/uc/avatar/000/00/50/88_avatar_original.jpg?v=65&w=44&h=44">
		</li>
	</ul>
	<!-- 提示开始 -->
	<div class="gift-tips" id="giftTips">
		<div class="tips-box">
			<div class="tips-arrow"></div>
			<div class="tips-content">
				<div class="gift-item-box">
					<div class="gift-cover">
						<img src="https://img.hrloo.com/uc/avatar/000/00/50/88_avatar_original.jpg?v=65&w=120&h=120">
					</div>
					<div class="gift-info">
						<div class="title"><em>康乃馨</em><span>免费</span></div>
						<div class="text">给老师最真挚的祝福</div>
						<div class="foot">
							<a class="btn" href="javascript:;">立即赠送</a>
							<span class="note">仅限赠送1次</span>
						</div>
					</div>
				</div>
				<div class="tips-arrow"></div>
			</div>
		</div>
	</div>
	<!-- 提示结束 -->
</div>


LESS:

// 礼物赠送区
.gifts {
	float: left;
	margin-right: 50px;
	position: relative;
	// 礼物列表
	li {
		float: left;
		padding: 2px 0;
		width: 56px;
		height: 56px;
		border-radius: 3px;
		overflow: hidden;
		img {
			border: 1px solid #333333;
			width: 44px;
			height: 44px;
			margin: 5px;
			display: block;
			// ._transition(0.3s,0s);
			&:hover {
				// ._transition(0.3s,0s);
				width: 48px;
				height: 48px;
				margin: 3px;
			}
		}
	}
	// 礼物弹窗
	.gift-tips {
		position: absolute;
		left: 22px;
		top: 5px;
		z-index: 9999;
		display: block;
		transform: scale(0);
		// 在这里添加会影响左右移动的速度
		// ._transition(0.3s,0s);
		&.show {
			left: -128px;
			transform: scale(1);
			// 在这里添加会影响左右移动的速度
			// ._transition(0.3s,0s);
		}
		// 动画过渡效果
		&.trans {
			._transition(0.3s,0s);
		}
		// 礼物盒子弹窗内的样式
		.tips-box {
			.clearfix();
			position: relative;
			.tips-arrow {
				position: absolute;
			    display: block;
			    left: 150px;
			    bottom: 0;
			    width: 0;
			    height: 0;
			    background: #fff;
			    border: 5px solid #fff;
			    -webkit-transform: rotate(45deg);
			    transform: rotate(45deg);  
				box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
			}
			.tips-content {
				position: absolute;
				left: 0;
				bottom: 5px;
				width: 270px;
				height: 100px;
				padding: 15px;
				background: #fff;
				border-radius: 3px;
				box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
				// 礼物盒子 start
				.gift-item-box {
					.clearfix();
					// 礼物图片
					.gift-cover {
						width: 100px;
						height: 100px;
						float: left;
						margin-right: 15px;
						img {
							width: 100px;
							height: 100px;
							display: block;
						}
					}
					.gift-info {
						width: 155px;
						float: left;
						.title {
							.clearfix();
							em {
								._f(b,16px,26px);
								color: #333;
								float: left;
							}
							span {
								float: left;
								margin-left: 20px;
								color: #FF9000;
								._f(n,14px,26px);
							}
						}
						.text {
							.clearfix();
							margin: 5px auto 20px auto;
							._f(n,12px,20px);
							color: #999999;
						}
						.foot {
							.clearfix();
							a {
								float: left;
								display: inline-block;
								width: 72px;
								._f(n,12px,24px);
								text-align: center;
								height: 24px;
								border-radius: 3px;
								background-color: #ff9000;
								text-decoration: none; 
								color: #fff;
								&:hover { 
									text-decoration: none;
									background-color: #f06613; 
								}
							}
							.note {
								display: inline-block;
								._f(n,12px,24px);
								color: #888;
								margin-left: 10px;
							}
						}
					}
				}
				// 礼物盒子 end
				.tips-arrow {
					box-shadow: none;
					bottom: -5px;
				}
			}		
		}
	}
}


Javascript:

$(function(){
    // 送礼物弹窗效果 CSS动画效果会影响JS执行,所以将CSS3动画用JS添加上去,在移动时不受CSS3动画干拢
    var giftBox = $('#giftTips');
    var giftsBoxWrap = $('#giftTipsWrap');
    giftsBoxWrap.hover(function(e) {
        giftBox.addClass('trans').addClass('show');
    },function(e) {
        giftBox.addClass('trans').removeClass('show');
    }).on('mouseenter','li',function(e) {
        var index = $(e.currentTarget).index();
        giftBox.removeClass('trans').css({'margin-left': (index * 56 ) +'px'}).find('.title em').html(index+1);
    });    
});