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

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

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

    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,原来是一个异步操作,这就可以理解为什么执行无效了。改成这样

    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

<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({ /**
* 页面的初始数据
*/
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()
})
}
})

  

微信小程序动画:高度渐变,left渐变的更多相关文章

  1. 微信小程序动画之圆形进度条

    微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...

  2. 精确计算微信小程序scrollview高度,全机型适配

    众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到. 而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用.布局复杂的时候谁还给你算高度啊.. ...

  3. 微信小程序动画实现(API,css)

    微信小程序动画API实现 index.js clicktap:function(){ var Animation=wx.createAnimation({ duration: 2000, }) Ani ...

  4. 微信小程序动画技巧

    用微信小程序自带的wx.createAnimation api可创建动画,该动画效果相比css写的动画更流畅. 栗子与用法,见官网:https://mp.weixin.qq.com/debug/wxa ...

  5. 微信小程序动画之弹出菜单

    用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...

  6. 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接

    为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...

  7. 微信小程序swiper高度自适应,swiper的子元素高度不固定

    小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...

  8. 微信小程序 --- 动画

    动画的基本使用: 旋转动画 缩放动画 偏移动画 倾斜动画 矩阵动画 动画API:wx.createAnimation(object) 示例:创建一个点击的动画 <view class=" ...

  9. 微信小程序——动画操作时,rpx 和 px 的转换计算。

    嫌长版本: var rpx = 10000; var systemInfo = wx.getSystemInfoSync(); var px = rpx / 750 * systemInfo.wind ...

随机推荐

  1. linux 计算机概论 Linux介绍

    CPU: CPU内部可以分为两个主要单元:算数逻辑单元和控制单元. 算数逻辑单元主要用于程序运算和逻辑判断,控制单元主要用于协调各个组件和各单元的工作. CPU基本可以分为两种: 精简指令集和复杂指令 ...

  2. macOS Mojave 10.14上安装iTunes12.6

    将一下内容保存为iTunes.scpt,并运行 set question to display dialog "确定是否删除 iTunes ?" buttons {"Ye ...

  3. 34. ClustrixDB 降低集群的容量-Flex down

    有时,可能需要减少集群的容量: 减少高峰事件后的运营成本 为其他目的分配服务器. 删除故障硬件.(参见删除ALTER CLUSTER以删除永久失败的节点.) 在ClustrixDB中缩小集群的过程很简 ...

  4. 【CUDA 基础】4.2 内存管理

    title: [CUDA 基础]4.2 内存管理 categories: - CUDA - Freshman tags: - CUDA内存管理 - CUDA内存分配和释放 - CUDA内存传输 - 固 ...

  5. Vue_(基础)Vue中的指令

    Vue.js中文文档 传送门 Vue的指令:其实就是单个JavaScript表达式,一般来说是带有v-前缀   Vue指令: v-model:数据双向绑定: v-text:以纯文本方式显示数据: v- ...

  6. HDU 5806 NanoApe Loves Sequence Ⅱ ——(尺取法)

    题意:给出一个序列,问能找出多少个连续的子序列,使得这个子序列中第k大的数字不小于m. 分析:这个子序列中只要大于等于m的个数大于等于k个即可.那么,我们可以用尺取法写,代码不难写,但是有些小细节需要 ...

  7. $\LaTeX$数学公式大全7

    $7\ Arrow\ Symbols$ $\leftarrow$ \leftarrow $\Leftarrow$ \Leftarrow $\rightarrow$ \rightarrow $\Righ ...

  8. ASIHTTPRequest使用

    http://qk13warcraft.blog.163.com/blog/static/157549344201271633014969/ 1.创建和运行请求 创建一个同步请求 这是最简单的用法,发 ...

  9. TCP输入 之 快速路径和慢速路径

    概述 快速路径:用于处理预期的,理想情况下的数据段,在这种情况下,不会对一些边缘情形进行检测,进而达到快速处理的目的: 慢速路径:用于处理那些非预期的,非理想情况下的数据段,即不满足快速路径的情况下数 ...

  10. How to intercept any postback in a page? - ASP.NET

    How to intercept any postback in a page? - ASP.NET There's a couple of things you can do to intercep ...