这篇文章主要为大家详细介绍了vuejs实现折叠面板展开收缩动画效果,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!
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 {