微信小程序动画：高度渐变，left渐变

　　今天在测试微信小程序动画的时候遇到了坑，需求是这样的点击时子元素从外部滑动回来，父元素的高度跟随子元素的高度改变。

 

　　实现子元素left为0并不复杂，但是改变父元素box的高度的时候却遇到了坑，因为是需要跟随子元素right的高度来改变父元素box的高度的，并且子元素right的高度不确定，我们需要先获取子元素的高度。

　　在改变高度的时候出错了，高度未改变。在测试时发现

?

1 2 3 4 5 6 7 8 9 10

var box = wx.createAnimation(option); // 创建动画 var obj = wx.createSelectorQuery(); obj.select('.anr').boundingClientRect(function (rect) {//获取子元素高度   box.height(rect.height).step();//改变父元素高度   console.log(1); }).exec(); console.log(2); that.setData({   box: box.export() });

　　

　　先打印的竟然是2，原来是一个异步操作，这就可以理解为什么执行无效了。改成这样

?

1 2 3 4 5 6 7

obj.select('.anr').boundingClientRect(function (rect) {//获取子元素高度   var box = wx.createAnimation(option); // 创建动画   box.height(rect.height).step();//改变父元素高度   that.setData({     box: box.export()   }); }).exec();

　　想着应该没问题了，但是遇到了另外一个坑，父元素的高度一下子变成了预设的效果，并没有Animation的渐变效果。本身父元素的高度是由left这个子元素撑起来的，给父元素预设一个高度这个问题就解决了。渐变效果就实现了。

 　　源码解析

wxml

?

1 2 3 4 5 6

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

/* 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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

// pages/userinfo/index.js Page({     /**    * 页面的初始数据    */   data: {     box: {},     anr: {},     down:true   },   add: function () {     this.setData({       down: false     });     var that = this;     let option = {       duration: 1000, // 动画执行时间       timingFunction: 'ease-in' // 动画执行效果     };     var anr = wx.createAnimation(option);// 创建动画     this.anr=anr;     anr.left(0).step();     that.setData({       anr: anr.export()     });     var obj = wx.createSelectorQuery();     obj.select('.anr').boundingClientRect(function (rect) {//获取子元素高度       var box = wx.createAnimation(option); // 创建动画       that.box=box;       box.height(rect.height).step();//改变父元素高度       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()     })   } })