uni-app、微信小程序对话框、气泡框弹出效果
项目中涉及到问卷调查类内容，用户选择一个选项后，后面的问题会自动弹出并有气泡变大的效果，项目用uni-app开发，但是相关api微信小程序也有提供，只要替换掉即可，效果如图所示，做下记录，以便学习。
气泡弹出.gif
1.气泡框用CSS即可实现，这里将它封装成了一个子组件，样式如下
.dialog-bubble{
padding: 52rpx 48rpx;
margin: 12rpx 18rpx;
width: calc(100% - 36rpx);
height: auto;
background: #FFF;
border-radius: 48rpx 48rpx 48rpx 12rpx;
box-sizing: border-box;
transform: scale(0.1);
transform-origin: 0% 100% !important;
-webkit-transform-origin: 0% 100% !important;
}
transform的部分暂时先不用看，这是为了实现动画效果设置的，前面的设置完就能看到一个气泡框已经生成
2.接下来是控制下一个气泡的展示，满足条件后显示下一个气泡
这里就不贴代码了，uni用vue的语法，v-if控制就行，微信小程序用wx:if控制，接下来的代码都用vue贴出来，微信小程序的可以参照一下
3.当气泡框组件通过v-if渲染后，会开始这个组件的生命周期
所以我们在created中创建一个动画实例，动画时间为300ms
// 初始化一个动画实例
var animation = uni.createAnimation({
duration: 300
})
紧接着延迟10ms调用它，这里使用了scale(1)，意思是放大到1倍，就是它的初始大小
setTimeout(() => {
animation.scale(1).step()
this.animationData = animation.export()
}, 10)
为什么这样设置，是因为最开始的css中最后几行是这样，意思是缩小到0.1倍，并以左侧0%、高度100%（即左下角）的位置为中心变化
.dialog-bubble{
transform: scale(0.1);
transform-origin: 0% 100% !important;
-webkit-transform-origin: 0% 100% !important;
}
所以当元素加载后，会因为设置了scale(0.1)首先缩小到左下角0.1倍，又触发了动画所以向上放大到初始大小
4.还有个问题是，气泡虽然生成，但是页面并没有向下滚动，因此新生成的气泡实际上被遮住了，所以要在生成气泡的同时，让页面向下滚动
在选择完上一题答案后里触发向下滚动
// 触发滚动效果
this.scrollToBottom()
这里要先获得父元素距离顶部的距离，还有当前元素距离上面的距离，两者的差才是页面需要滚动到的位置，滚动时间跟气泡弹出时间设置成一样，就会在弹出的同时向上滚动
scrollToBottom () {
uni.createSelectorQuery().select('.test-content').boundingClientRect(father => {
uni.createSelectorQuery().selectAll('.question-list').boundingClientRect(child => {
let arr = [...child]
let lastDom = arr.pop()
uni.pageScrollTo({
scrollTop: lastDom.top - father.top,
duration: 300
})
}).exec()
}).exec()
},
