小さいプログラムwepyは穴の旅を踏みます

まず公式サイトのアプリを見てみましょうhttps://developers.weixin.qq.com/miniprogram/dev/api/api-animation.htmlあ、見終わったらおすすめhttp://www.jb51.net/article/102263.htmanimationの文章を話して、上の書いたのはとても詳しいです

ソースコードは次のとおりです:(wepyファイルに直接コピーすれば使用できます)

<template>
  <view class="shop-cart">
    <button class="show-btn" @tap="show">  button>
    <view class="demo" animation="{{animationData}}">
      <button class="btn" @tap="hide">Xbutton>
    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>