vue插入评论滑入
2020-12-04 本文已影响0人
缓慢的蜗牛
第一步:安装:
在命令行中执行:
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>