vue插入评论滑入

第一步：安装：

在命令行中执行：

npm install animate.css@3.7 --save //注意目前4.版本的不支持，所以使用的是3.版本

html：

      <div ref="insertAnimation" class="insertAnimation">
        <div class="insert-animation-list" ref="animationList" id="animationList" :style="marginTopVal">
           <div class="insert-animation-item animated fadeInRightBig" v-for="(item,index) in insertAnimationList">
              {{item.name}}+{{index}}
           </div>
         </div>
       </div>
       <button type="button" @click="addItem">加一个</button>

js:
main.js中 或 vue文件中：引入使用

import Vue from 'vue'
import animated from 'animate.css'  // npm install animate.css --save安装为前提，在引入
Vue.use(animated)
export default {
  name: 'dome',
  data () {
    return {
      insertAnimationList: [
        {name: '小明', state: 1},
        {name: '小王', state: 1},
        {name: '小张', state: 2},
        {name: '小是', state: 3},
        {name: '小分', state: 1},
        {name: '小成', state: 1},
        {name: '小吧', state: 1},
      ],
      marginTopVal: '', //向上滚动高度

    }
  },
  // 引入组件
  components: {},
  // 页面加载方法
  mounted () {

  },
  // 方法集合
  methods: {
    addItem: function () {
      let _that = this
      let item = {name: '小明', state: 1}
      _that.insertAnimationList.push(item)
    },
    // 开始滚动函数
    rollStart: function () {
      let _that = this
      // 上面声明的DOM对象为局部对象需要再次声明
      let animationItem = _that.$refs.animationList.firstElementChild.offsetHeight
      let insertAnimationListLength = _that.insertAnimationList.length
      _that.marginTopVal = {marginTop: -(insertAnimationListLength - 7) * animationItem + 'px'}

    }

  }

}

css:

<style type="text/css">
  .insertAnimation {
    height: 200px;
    overflow: hidden;
  }
</style>