Small program Animation: highly gradient, left gradient

Today, when testing WeChat applet animation, there is a pit. The requirement is that when clicking, the child element slid back from the outside, and the height of the parent element follows the height of the sub element.

 

It is not complicated to realize the left of the child element to be 0, but when we change the height of the parent element box, we encounter a pit, because it is necessary to follow the height of the child element right to change the height of the parent element box, and the height of the child element right is uncertain, so we need to get the height of the child element first.

There was a mistake in changing the altitude, and the altitude remained unchanged. Discovered during testing

    var box = wx.createAnimation(option); // Create animation
    var obj = wx.createSelectorQuery();
    obj.select('.anr').boundingClientRect(function (rect) {//Get child element height
      box.height(rect.height).step();//Change the height of the parent element
      console.log(1);
    }).exec();
    console.log(2);
    that.setData({
      box: box.export()
    });

  

The first print is 2. It turned out to be an asynchronous operation, which helps to understand why the execution is invalid. Change this way

    obj.select('.anr').boundingClientRect(function (rect) {//Get child element height
      var box = wx.createAnimation(option); // Create animation
      box.height(rect.height).step();//Change the height of the parent element
      that.setData({
        box: box.export()
      });
    }).exec();

It should be okay to think about it, but when you encounter another pit, the height of the parent element suddenly becomes the default effect, and there is no Animation gradient effect. The height of the parent element itself is supported by the child element of left. The problem of presupposing a height for the parent element is solved. Gradient effect is achieved.

Source code parsing

wxml

<view class="box" animation="{{box}}">
  <view class="anl">left</view>
  <view class="anr" animation="{{anr}}">right</view>
</view>
<button bindtap="add" wx:if="{{down}}">goDown</button>
<button bindtap="goback" wx:else>goBack</button>

 

wxss

/* pages/userinfo/index.wxss */
.box{
  position: relative;
  height: 200rpx;
  overflow: hidden;
  text-align: center;
  color: white;
  font-size: 120rpx;
}
.anl{
  height: 200rpx;
  background-color: red;
}
.anr{
  background-color: green;
  height: 400rpx;
  width: 100%;
  position: absolute;
  left: 100%;
  top: 0;
}
.add{
  background-color: yellow;
  height: 100rpx;
}

  

js

// pages/userinfo/index.js
Page({

  /**
   * Initial data of pages
   */
  data: {
    box: {},
    anr: {},
    down:true
  },
  add: function () {
    this.setData({
      down: false
    });
    var that = this;
    let option = {
      duration: 1000, // Animation execution time
      timingFunction: 'ease-in' // Animation execution effect
    };
    var anr = wx.createAnimation(option);// Create animation
    this.anr=anr;
    anr.left(0).step();
    that.setData({
      anr: anr.export()
    });
    var obj = wx.createSelectorQuery();
    obj.select('.anr').boundingClientRect(function (rect) {//Get child element height
      var box = wx.createAnimation(option); // Create animation
      that.box=box;
      box.height(rect.height).step();//Change the height of the parent element
      that.setData({
        box: box.export()
      });
    }).exec();
  },
  goback:function(){
    this.setData({
      down:true
    });
    this.box.height('200rpx').step();
    this.setData({
      box:this.box.export()
    });
    this.anr.left('750rpx').step();
    this.setData({
      anr:this.anr.export()
    })
  }
})

Tags: PHP

Posted on Wed, 09 Oct 2019 18:32:16 -0700 by offsprg01