显示时
隐藏时
``` <view class="column popupfx" :class="specClass">
<u-button @click="goCleanRecords()" type="primary">保洁记录</u-button>
</view>
```js
data() {
return {
specClass: 'hide'
}
},
handletouchstart() {
this.specClass = 'show';
},
handletouchend() {
this.specClass = 'hide';
},
//查看保洁记录按钮
.popupfx {
position: fixed;
top: 80%;
right: 20rpx;
z-index: 10;
&.show {
animation: showLayer 0.2s linear both;
}
&.hide {
animation: hideLayer 0.2s linear both;
}
@keyframes showLayer {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%); //这里可以通过变大变小调整偏移量
}
}
@keyframes hideLayer {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
}