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()
},

uni-app、微信小程序对话框、气泡框弹出效果