Vuejs高度的改变动画探索：折叠面板Collapse组件的最佳实现方案

使用过CSS transition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的；那么如何才能实现元素高度的改变动画效果呢？ 本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。

要实现高度的改变动画，我们需要在动画进行之前为元素设置准确的高度。

当元素由可见变为隐藏状态时，我们需要先获取元素的计算高度，将其设置到style属性上，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为0，这样高度的改变动画就会正常进行。

当元素由隐藏变为可见状态时，我们需要先将高度设置为auto，然后获取元素的计算高度，再将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为计算高度，这样高度的改变动画就会正常进行。

现在，根据以上实现原理分析，我们创建一个高度的改变动画通用组件CollapseTransitionvue。该组件非常简单，仅需30多行代码。我几乎每行代码都有注释，大家应该能看懂吧？

以上就是实现高度的改变动画的通用组件源码，童鞋们理解了吗？是不是非常简单？现在，我们实现折叠面板组件。使用过element-ui这样的UI库的童鞋们应该都知道，折叠面板是由两个组件折叠面板Collapse和折叠面板项CollapseItem组合而成；

现在，我们先实现CollapseItemvue组件。为了节省篇幅，我将源码中的空行全部去掉了，缩进比较规范，自认为可读性还行；源码如下，一共30多行，我直接在源码中添加了注释，就不过多解释了。

这是CollapseItemvue组件的样式。

现在，我们实现Collapsevue组件。该组件仍然只有30多行，大家理解起来应该很轻松，我就直接在源码里添加注释作为讲解了；

以上就是折叠面板组件的实现。包括折叠动画组件，一共仅需不到150行代码，是不是非常简单？童鞋们都理解了吗？不管有什么疑问，童鞋们都可以问我。感谢阅读！

最小高度：ObjectstyleminHeight=length;

隐藏元素：Objectstyledisplay=none;

其他属性参考： >

需要使用到js，获取到点击按钮

声明一个变量为 var flag = false

当点击时 if(！flag){ flag = true ， 把要显示的元素设置display为none}else{ flag= false， display设置为block}

1、call和apply

二者都可以改变当前的this，区别在于apply方法要将参数放入数组中再传参

2、函数的继承

function Fclass(name, age){

thisname = name;

thisage = age;

}

FclassprototypeshowName = function(){

alert(thisname);

}

FclassprototypeshowAge = function(){

alert(thisage);

}

3、子类

function Sclass(name, age, job){

// 调用父类的call方法并传入子类的this，可实现属性的继承

Fclasscall(this,name,age);

thisjob = job;

}

// 方法继承：将父类的一个实例赋值给子类的继承

Sclassprototype = new Fclass();

SclassprototypeshowJob = function(){

alert(thisjob);

}

var Driver = new Sclass('tom',18,'老司机');

DrivershowName();

DrivershowAge();

DrivershowJob();

4、新增选择器

documentquerySlector()    选择一个

documentquerySlectorAll()   选择一类

jQuery加载：

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery有ready方法解决

//JS写法

windowonload = function(){

var div = documentgetElementById('div');

alert(divinnerHTML);

}

//JQ写法

$(document)ready(function() {

var $div = $('#div');

alert('jquery:' + $divhtml());

})

//简写

$(function(){

var $div = $('#div');

alert('jquery:' + $divhtml());

})

5、jQuery选择器：

$(document) //选择整个文档对象

$('li') //选择所有的li元素

$('#myId') //选择id为myId的网页元素

$('myClass') // 选择class为myClass的元素

$('input[name=first]') // 选择name属性等于first的input元素

$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li

$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行

$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li

$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

对选择集进行函数过滤

$('div')has('p'); // 选择包含p元素的div元素

$('div')not('myClass'); //选择class不等于myClass的div元素

$('div')filter('myClass'); //选择class等于myClass的div元素

$('div')first(); //选择第1个div元素

$('div')eq(5); //选择第6个div元素

6、选择集转移

$('div')prev('p'); //选择div元素前面的第一个p元素

$('div')prevAll('p'); //选择div元素前面所有的p元素

$('div')next('p'); //选择div元素后面的第一个p元素

$('div')nextAll('p'); //选择div元素后面所有的p元素

$('div')closest('form'); //选择离div最近的那个form父元素

$('div')parent(); //选择div的父元素

$('div')children(); //选择div的所有子元素

$('div')siblings(); //选择div的同级元素

$('div')find('myClass'); //选择div内的class等于myClass的元素

jQuery样式 *** 作：

//读取样式

alert($('div1')css('fontSize'));

//设置样式

$('div1')css({background:'gold'});

//增加行间样式

$('div1')addClass('big');

//减少行间样式，多个样式用空格分开

$('div1')removeClass('div1');

7、click事件

$('#btn')click(function(){

$('box')toggleClass('sty');  //切换样式

});

jQuery索引值：

$('list li')click(function(){

// alert(thisinnerHTML);

// alert($(this)html());

alert($(this)index());

});

jQuery属性 *** 作：

html()

// 取出html内容

var $htm = $('#div1')html();

// 设置html内容

$('#div1')html('<span>添加文字</span>');

text()

// 取出文本内容

var $htm = $('#div1')text();

// 设置文本内容

$('#div1')text('<span>添加文字</span>');

attr():

// 取出的地址

var $src = $('#img1')attr('src');

// 设置的地址和alt属性

$('#img1')attr({ src: "testjpg", alt: "Test Image" });

jQuery特殊效果：

fadeIn() 淡入

fadeOut() 淡出

fadeToggle() 切换淡入淡出

hide() 隐藏元素

show() 显示元素

toggle() 依次展示或隐藏某个元素

slideDown() 向下展开

slideUp() 向上卷起

slideToggle() 依次展开或卷起某个元素

jQuery链式调用

$('#div1') // id为div1的元素

children('ul') //该元素下面的ul子元素

slideDown('fast') //高度从零变到实际高度来显示ul元素

parent()  //跳到ul的父元素，也就是id为div1的元素

siblings()  //跳到div1元素平级的所有兄弟元素

children('ul') //这些兄弟元素中的ul子元素

slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

在网页制作中，元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路

对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等

注意：如果要适用于任何元素需要提前储存元素的display值

visibility:hidden与display:none作为隐藏元素的两种方式，常常被人们拿来比较。其实区别很简单，前者不脱离文档流，保留隐藏之前元素占据的物理区域；而后者则脱离文档流，如果重新显示则需要页面的重新绘制。还有一点区别却很少人提到，如果父级设置display:none;子级设置display:block也不会显示；而如果父级设置visibility:hidden;子级设置visibility:visible时子级会显示出来

注意：visilibity可应用transition属性。因为visibility是离散步骤，在0到1数字范围之内，0表示隐藏，1表示显示。visibility:hidden可以看成visibility:0；visibility:visible可以看成visibility:1。于是，visibility应用transition等同于0~1之间的过渡效果。实际上，只要visibility的值大于0就是显示的。由于这个现象，我们可以利用transition实现元素的延时显示隐藏

可能有些人不太熟悉，HTML有个hidden全局属性，专门用于显示隐藏元素，与display:none的作用类似，元素隐藏时脱离文档流，无法接受javascript事件

注意：IE10-不支持testhidden='hidden'写法，只支持testsetAttribute('hidden','hidden')写法

对于元素显隐，opacity的使用频率也挺多。opacity的好处是，即使opacity为0的元素，仍然可以接受javascript事件，这是display:none和visiblity:hidden所不具备的。

CSS中有一个属性是overflow，overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或width:0来实现元素的显隐

注意：当设置overflow的元素在绝对定位元素和其包含块之间的时候，overflow属性会失效

CSS裁剪clip这个属性平时用的不多，当clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right时，可实现元素的隐藏效果，效果类似于visibility:hidden

注意：clip属性只能应用在绝对定位元素上

CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本 *** 作，还可以通过设置matrix矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果

注意：IE9-浏览器不支持，safari31-8、android21-444、IOS32-84都需要添加前缀

1scale

transform:scale(0)时，元素被隐藏

2rotate

transform:rotateX(90deg)时，元素被隐藏

3skew

transform:skew(90deg)时，元素被隐藏

利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸，通过控制伪元素的定位属性，实现显隐效果

//鼠标移入移出会出现元素的显隐效果

元素显示隐藏的另一种常见思路是偏移，将元素移动到视窗范围外，也可以实现等价的显隐效果

1margin-top

利用负margin将元素移出视窗外，要注意的是设置负margin的元素并没有脱离普通流，后续元素会跟着一起移动

2left

通过设置相对定位或绝对定位元素的偏移属性，将元素移动到视窗外

3translate

以上就是关于Vuejs高度的改变动画探索：折叠面板Collapse组件的最佳实现方案全部的内容，包括:Vuejs高度的改变动画探索：折叠面板Collapse组件的最佳实现方案、利用JS设置元素style属性：最小高度/隐藏、html和css如何实现点击出现隐藏列表等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！