vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。
循环列表,html:
{ {item.content}}
【展开】【收缩】
在css上加上动画transition
.newslist ul li p {
font-size: 14px;
color: #555;
line-height: 25px;
height: 50px;
overflow: hidden;
transition: height .3s;
}
重点是下面js的实现:
分为两种情况:
(一)初始状态是收缩时:
import Vue from 'vue'
export default {
props: ['newslist'],
data() {
return {
liConHeight: 50 // 两行文字的高度
}
},
methods: {
open(item, i) {
const liCon = this.$refs.liCon[i]
var height = liCon.offset