版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29329037/article/details/80523370
大家可以先看下官网小程序apianimation:https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html,看完之后推荐看一下http://www.jb51.net/article/102263.htm讲animation的文章,上面写的很详细
源码如下:(直接复制到一个wepy文件中就可以使用了)
<template>
<view class="shop-cart">
<button class="show-btn" @tap="show">展示</button>
<view class="demo" animation="{{animationData}}">
<button class="btn" @tap="hide">X</button>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class ShopCart extends wepy.page {
config = {
navigationBarTitleText: '购物车'
};
components = {
};
mixins = [];
data = {
animationData: {}
}
computed = {}
methods = {
show () {
this.animation.height('200rpx').step()
this.setData({
animationData: this.animation.export()
})
},
hide() {
this.animation.height(0).step()
this.setData({
animationData: this.animation.export()
})
}
}
events = {}
onLoad() {
let animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
this.animation = animation
}
}
</script>
<style lang="less">
.demo {
width: 100%;
height: 0rpx;
background: pink;
position: absolute;
bottom: 0;
.btn { width: 30rpx;
height: 30rpx;
color: #000;
font-size: 10rpx;
position: absolute;
top: 0;
right: 0;
}
}
</style>