解決刪除元素動畫的bug

效果說明

首先說明一下我須要作到的效果

其實很簡單---點擊刪除按鈕的時候，加入刪除動畫

刪除動畫是這樣的，高度和寬度都會均勻的變小，內部的元素須要被隱藏（由於會有文字擠在一塊兒）；直到變爲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)