5.17 height:0配合overflow:hidden消失动画，待div动画结束要再渲染BScroll，使用transitin-group:key值导致ref和数据不同步

1、transition动画让元素消失，height: 0即可，但如果div涉及文字，需要配合overflow:hidden。因为文字是不会被height：0所遮挡的。
效果如下：

2、有些数据变化附带transition动画的延迟，如上，在动画未渲染完毕，即数据未真实改变之前。不要重新渲染BScroll，这时的高度依旧是变化之前，待动画结束之后，再重新渲染BScroll组件。

3、使用transition-group，当:key值绑定后，数组若新加入对象，可能会引发数据渲染不同步问题，调用$refs就会发现数据已经错乱。经实践，如果:key直接绑定index不会报错，但是动画就不会触发，所以这是下策。但是使用group动画，一旦插入新对象，:key值下的原先的数据位置在ref引用下是不会改变的，也就是说，Array数据已经发生变化，渲染层（眼睛看见的）发生改变，但是ref的实质（console.log(this.$refs.listItem)）数据位置错乱，:key值的约束使得新数据的加入永远排在已存在的ref之后。

简述问题：this.$refs.listItem[index]和实际dom渲染位置索引不符合。
最佳处理方法： 因为我是通过BScroll，想触发scrollToElement，所以直接遍历ref，去fitler需要的dom即可。

    scrollToCurrent (current) {
      // 考虑随机播放，得获取正确索引位置
      // const index = this.sequenceList.findIndex(song => current.id === song.id)
      // this.$refs.listContent.scrollToElement(this.$refs.listItem[index], 300)
      // 考虑到ref和数据不同步，不能通过索引，需要获取具体dom。
      this.$nextTick(() => {
        const refs = this.$refs.listItem
        // 直接返回dom的引用
        const currentRef = refs.filter(item => item.innerText === current.name)[0]
        // console.log(currentRef)
        this.$refs.listContent.scrollToElement(currentRef, 300)
      })
    },