<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;
}
了解更多,来找我玩啊
标签:upordown,动画,style,卡片,refs,innerHTML,购物车,height,panel From: https://blog.51cto.com/u_15964288/6056539