微信小程序动画：高度渐变，left渐变
发布时间：2020-12-14 19:13:08 所属栏目：资源 来源：网络整理
导读：今天在测试微信小程序动画的时候遇到了坑，需求是这样的点击时子元素从外部滑动回来，父元素的高度跟随子元素的高度改变。 ? 实现子元素left为0并不复杂，但是改变父元素box的高度的时候却遇到了坑，因为是需要跟随子元素right的高度来改变父元素box的高度的
|
今天在测试微信小程序动画的时候遇到了坑，需求是这样的点击时子元素从外部滑动回来，父元素的高度跟随子元素的高度改变。
? 实现子元素left为0并不复杂，但是改变父元素box的高度的时候却遇到了坑，因为是需要跟随子元素right的高度来改变父元素box的高度的，并且子元素right的高度不确定，我们需要先获取子元素的高度。 在改变高度的时候出错了，高度未改变。在测试时发现
先打印的竟然是2，原来是一个异步操作，这就可以理解为什么执行无效了。改成这样 7
|
??// 创建动画
that.setData({
box: box.export()
});
想着应该没问题了，但是遇到了另外一个坑，父元素的高度一下子变成了预设的效果，并没有Animation的渐变效果。本身父元素的高度是由left这个子元素撑起来的，给父元素预设一个高度这个问题就解决了。渐变效果就实现了。
? 源码解析 wxml6
|
class="box" animation="{{box}}">
"anl">left</view>
"{{anr}}">right</view>
</view>"add"
wx:if"{{down}}">goDown</button>
"goback" else>goBack</button>
|
wxss
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* pages/userinfo/index.wxss */
.box{height: 200rpx;
font-size: 120rpx;
.anl{background-color: red;
.anr{height: 400rpx;
position: absolute;
top: 0;
.add{height: 100rpx;
js
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
Page({
?
??/**
* 页面的初始数据
*/
box: {},
down:true
add: function () {
this
.setData({
??????down: false
that = ;
option = {
duration: 1000,// 动画执行时间
'ease-in'
// 动画执行效果
};
// 创建动画
.anr=anr;
that.setData({
});
//获取子元素高度
// 创建动画
that.box=box;
that.setData({
box: box.export()
});
goback:function(){
.setData({
});
'200rpx'
).step();
.setData({
.box.export()
});
'750rpx'
).step();
.setData({
.anr.export()
})
})