javascript - 显示和隐藏元素列表时,在页面的其余部分平滑 Nuxt/Vue 过渡
问题描述
我得到了一个网格项目列表,以及一个在“多看”和“少看”之间切换的按钮。单击“查看更多”按钮,将显示所有列表。点击少看,只显示3个项目。当显示所有项目时,我们得到了一个很好的过渡,但是当我们隐藏它们时,底部的所有元素都不会跟随运动。我怎样才能使过渡顺利,不要让用户在段落中间?
模板示例:
<div>
<transition-group name="list" class="grid">
<div v-for="(content,index) in contents" :key="index" class="card">
<h4>
{{index}}
</h4>
</div>
</transition-group>
<button @click="onClickSeeButton">
{{ seeButton }}
</button>
<p>
Some text...
</p>
</div>
我使用那些 css 属性进行过渡
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
}
脚本如下:
new Vue({
el: "#app",
data: {
els: [1,2,3,4,5,6,7,8,9,10,11,12], // from 0 to infinite
seeMore: true
},
computed: {
contents: function(){
return this.seeMore ? this.els.filter((el,index) => index < 3 ) : this.els
},
readButton: function(){
return this.seeMore ? 'see more' : 'see less'
}
},
methods: {
onClickReadButton: function(){
this.seeMore = !this.seeMore
}
}
})
解决方案
试试这个
.list-enter-active, .list-leave-active {
transition: all 1s;
opacity: 1;
}
.list-enter, .list-leave-to {
opacity: 0; height: 0;
}
https://jsfiddle.net/w4v9g6us/
这里也是阅读更多关于 vue 和转换的好地方https://vuejs.org/v2/guide/transitions.html
推荐阅读
- javascript - Javascript 菜单在 safari 9 和 Internet Explorer 中不起作用
- git - 当两个开发人员向 master 提交不兼容的更改时会发生什么?
- python - 导入 sys 后列表“sys.argv”为空
- angular - Angular 6:日期时间选择器,日期时间选择器有哪些好的可定制控件?
- html - 如何只改变
标记里面的
- 标记而无需修改 HTML
- java - HotSpot JVM可以在Java低版本模式下运行吗?
- java - 有没有办法在 Java Spring 中合并列表中不可预测的 Monos 数量?
- php - codeigniter 从文件夹中删除文件
- excel - 如何使用嵌套的 if 函数解析为“value if true”if 语句中的字符串?
- spf - 间歇性 SPF 失败,与
场地