解决删除元素动画的bug

Posted 2020-10-01 xg123

效果说明

首先说明一下我需要做到的效果

其实很简单---点击删除按钮的时候，加入删除动画

删除动画是这样的，高度和宽度都会均匀的变小，内部的元素需要被隐藏（因为会有文字挤在一起）；直到变为0结束，时长为0.5s

一开始我是这样做的；

在base文件中创建一个删除类名，为它赋予一些样式

.delete {
  transition: all 0.5s;
  overflow: hidden;
  width: 0 !important;
  height: 0 !important; 
}
.delete * {
  opacity: 0;
}

点击删除按钮的时候，为被删除元素 .deleteObj 添加类名delete，这样的话，系统会将父元素的宽度和高度变为0，然后添加过渡效果；

被删除元素的样式是这样的

/*元素层级关系*/

.deleteObj
  p 111
  p 111
  p 111
  .delete-icon 删除

/*元素样式*/
.deleteObj {
    width: 500px;
    border: 2px solid ;
    padding: 20px;
    margin: 20px;
    p {
        margin-top: 30px;
    }
}

点击后，为被删除元素添加删除动画的js，这里直接引入了jquery

1 $(\'.delete-icon\').click(function() {
2     $(this).parent().addClass(\'delete\');
3 })

结果如下

发现宽度确实按照过渡效果出现了，但是高度确实一瞬间就变为了0，而且也没有我们想象中的，最终宽高都变为0；

那么是什么原因呢？

分析

  首先，最终宽高没有变为0的问题是因为这个

因为有padding的存在，所以即使宽高都变为0，最终的元素还是会有一定的高度和宽度，那么我们可以在删除样式中，添加 padding: 0 !important; 代码重置掉padding

但是，还有一个很重要的问题，那就是没有高度动画；

这里其实涉及到浏览器执行过渡动画的规则

在动画发生的时候，浏览器不会计算元素的实际宽高等大小，而是直接将变化后最终的css进行比较，如果发现css并没有设置属性，那么浏览器将会直接赋予该属性，而不是想象中的进行过渡动画；

解决方式1

那么我们可以为被删除元素添加高度，这样浏览器将会得知被删除元素之前的高度与最终的高度，进行动画，代码如下

 1 .delete {
 2     box-sizing: border-box;
 3     overflow: hidden;
 4     width: 0 !important;
 5     height: 0 !important;
 6     padding: 0 !important;
 7     transition: all .5s;
 8 }
 9 .delete * {
10     opacity: 0;
11 }
12 .deleteObj {
13     width: 500px;
14     border: 2px solid ;
15     padding: 20px;
16     height: 100px;
17     margin: 20px;
18     p {
19         margin-top: 30px;
20     }
21 }

结果如下：

动画是有了，但是我们发现，有一部分元素超出了被删除元素，那是因为我们强制为被删除元素设置了高度；

可是如果我们不想为元素设置高度，还想拥有高度动画怎么办？？

解决方法二

 我们去掉 .deleteObj 中强制设置的高度，使用js设置被删除元素的高度为实际高度，并且通知浏览器重排，重排之后再执行删除动画，代码如下

1 $(\'.delete-icon\').click(function() {
2     var deleteObj = $(this).parent();//被删除的父元素
3     deleteObj.css(\'height\',deleteObj.outerHeight());//设置被删除元素的css高度
4     deleteObj.outerHeight();//触发浏览器重排
5     deleteObj.addClass(\'delete\');//添加删除动画
6 })

结果如下：

这样既不会影响布局，而且删除效果也出现了；

---

 

这里给出一些触发浏览器重排的属性

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)