基于vue展开收起盒子动画（盒子高度不定）

问题： transition动画只能对高度给定的盒子，在高度变化时实现展开收起动画。对于不定高度的盒子，transition无能为力
解决方案： 小白入门，查找了大量资料后找到一篇大佬写的文章。大佬参考element-ui通过overflow获取高度的方法创建了一个函数式组件实现了对于不定高度的盒子展开收起动画的效果：

const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
const Transition = {'before-enter' (el) {el.style.transition = elTransitionif (!el.dataset) el.dataset = {}el.dataset.oldPaddingTop = el.style.paddingTopel.dataset.oldPaddingBottom = el.style.paddingBottomel.style.height = 0el.style.paddingTop = 0el.style.paddingBottom = 0},'enter' (el) {el.dataset.oldOverflow = el.style.overflowif (el.scrollHeight !== 0) {el.style.height = el.scrollHeight + 'px'el.style.paddingTop = el.dataset.oldPaddingTopel.style.paddingBottom = el.dataset.oldPaddingBottom} else {el.style.height = ''el.style.paddingTop = el.dataset.oldPaddingTopel.style.paddingBottom = el.dataset.oldPaddingBottom}el.style.overflow = 'hidden'},'after-enter' (el) {el.style.transition = ''el.style.height = ''el.style.overflow = el.dataset.oldOverflow},'before-leave' (el) {if (!el.dataset) el.dataset = {}el.dataset.oldPaddingTop = el.style.paddingTopel.dataset.oldPaddingBottom = el.style.paddingBottomel.dataset.oldOverflow = el.style.overflowel.style.height = el.scrollHeight + 'px'el.style.overflow = 'hidden'},'leave' (el) {if (el.scrollHeight !== 0) {el.style.transition = elTransitionel.style.height = 0el.style.paddingTop = 0el.style.paddingBottom = 0}},'after-leave' (el) {el.style.transition = ''el.style.height = ''el.style.overflow = el.dataset.oldOverflowel.style.paddingTop = el.dataset.oldPaddingTopel.style.paddingBottom = el.dataset.oldPaddingBottom}
}export default {name: 'collapseTransition',functional: true,render (h, { children }) {const data = {on: Transition}return h('transition', data, children)}
}

然后在需要的地方当作组件使用

使用教程

随便建个js文件(名字随便取，组件名也随便取)，把大佬的代码复制到js文件里面，然后在需要的界面把这个js文件当作组件引入,然后在components里面声明

import collapseTransition from './collapseTransition/collapseTransition.js'export default {name: "",data() {return {isShow: false};},components: {collapseTransition},computed: {},mounted() {}}

然后只需要把这个当成组件使用,使用v-show来判断是否展开

<collapse-transition><view class="" v-show="isShow"><view class=""></view></view>
</collapse-transition>

转载：大佬实现https://segmentfault.com/q/1010000011359250

基于vue渐变展开收起盒子动画（盒子高度不定）相关推荐

展开收起js动画效果
展开收起js动画效果 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Ad ...
基于vue创建的悦听音乐盒子
Vue 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,方便与第三方库或既有项目整合.Vue.js是 ...
vue制作展开收起效果
<template><div><div class="report-list-title"><div v-for="(item, ...
vue 列表展开收起
https://blog.csdn.net/weixin_42550863/article/details/81980094https://blog.csdn.net/weixin_42550863/ ...
CSS 展开收起样式
效果:展开.收起一. 效果一代码: <template><div class="container"><div class="head- ...
vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...
css3 updown 动画,Vue的transition中的slidedown,slideUp展开收起动画
vue transition动画 vue的transition过渡动画在vue官网已有详细教程,就不赘述了.然而当我们使用transition来实现slidedown,slideup的展开收起动画时, ...
Vue 实现在文本溢出后浮现Tooltip、及文本展开收起效果
目录示例: 1. expandable模式(默认) - 文本展开收起效果: 2. tooltip模式 - 文本使用Tooltip效果: 3. tooltipExpandable模式 - 文本同时使用 ...
ios 圆形旋转菜单_iOS高级动画：圆形树展开收起动画
转自:标哥的技术博客,作者:黄仪标(微博) 前段时间帮某某做了一个动画效果,今天分享给大家.关于动画的基础知识,这里不会细说,如果您还没有核心动画的基础知识,请先阅读相关文章,了解核心动画如何使用,然 ...

基于vue渐变展开收起盒子动画（盒子高度不定）

基于vue展开收起盒子动画（盒子高度不定）

使用教程

基于vue渐变展开收起盒子动画（盒子高度不定）相关推荐

最新文章

热门文章