首页 > 其他分享 >购物车底部卡片动画

购物车底部卡片动画

时间:2023-02-14 12:01:41浏览次数:49  
标签:upordown 动画 style 卡片 refs innerHTML 购物车 height panel

购物车底部卡片动画_vue.js

<footer class="footer" ref='panel'>
			<span class="pu">总计(不含运费)</span><span @click="down" ref='upordown' class="arrow">></span><br>
			<br>
			<span class="acc">共选中了<span class="red">{{ $store.getters.selectNum.number }}</span>件,共<span class="red">¥{{ $store.getters.selectNum.money }}</span>元</span>
			<button class="account">去结算</button>
		</footer>
down(){
				if(this.$refs.upordown.innerText == '<'){
					this.$refs.panel.style.bottom = '54px';
					this.$refs.panel.style.transition = 'all 1s ease';
					setTimeout(()=>{this.$refs.upordown.innerHTML = '>';},1000)
				}else{
					this.$refs.panel.style.bottom = '0px';
					this.$refs.panel.style.transition = 'all 1s ease';
					setTimeout(()=>{this.$refs.upordown.innerHTML = '<';},1000)
				}
			},
.arrow{
		display: block;
		width: 30px;
		height: 40px;
		background-color: #ccc;
		text-align: center;
		line-height: 40px;
		font-size: 25px;
		transform: rotate(90deg) translateY(-20px) scale(.5,1) translateX(4px);
		margin: -15px auto;
	}

了解更多,来找我玩啊购物车底部卡片动画_vue.js_02

标签:upordown,动画,style,卡片,refs,innerHTML,购物车,height,panel
From: https://blog.51cto.com/u_15964288/6056539

相关文章