巧用「雙transition」避「雙overflow」坑

很早的時候就據說overflow-y:hidden;和overflow-x:visible;混用時有問題。今天果真就遇到了。折騰了一通，仍是惹不起躲得起了。
場景：一個可摺疊面板，利用class和css3來實現toggle效果，同時面板上還內嵌有tooltip的效果。（此處可能實現方式有不少種，也算是爲了引到「雙transition」，故採用了其中一種，請自動忽略其餘細節?）
最終效果：

實現好html+css佈局後，首次實現時，是經過添加class改變container的高度，這時，意料之中的bug出現了：

因爲container未設置overflow因此雖然容器的高度改變了，可是內容並無隱藏。此時天然而然地去設置了overflow:hidden;。
設置完以後：

而後，哦?，右邊也被hidden了，那試一試分着寫吧，此時就踩坑了

.container {
  overflow-y: hidden;
  overflow-x: visible;
  ...
}

設置完以後，What！？沒做用？和設置overflow:hidden;效果同樣。因而乎，喚醒了之前的記憶，再加之Google，原來是W3C上定義的特性致使的：

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’

有一種方法是利用添加wrapper容器，而後利用max-width來解決。（試了一下，很差用，不知道是否是姿式不對）

因而乎，避坑，採用transition來解決問題。
爲了達到展開的效果，經過添加transition: height 0.5s;來給一個動畫執行時間。初始代碼

.container {
  height: 340px;
  transition: all 0.5s;
}
.container.close {
  height: 40px;
}
.container .wrapper {
  opacity: 1;
  transition: all 0.5s;
}
.container.close .wrapper {
  opacity: 0;
}

可是此時仍是有視覺上的瑕疵，在摺疊時，opacity的變化依然可以看出來重疊的影子在下一個container之上。
因而乎，稍微改了一下:

.container .wrapper {
  opacity: 1;
  transition: opacity 0.3s;
  transition-delay: 0.3s;
}
.container.close .wrapper {
  opacity: 0;
  transition: opacity 0.1s; /* 第二個 transition */
}

平時用css時常常是在其中一個狀態的選擇器中寫一個，這樣toggleClass時，就執行一樣的動畫。這裏利用transition-delay和兩個不一樣時長的transition來達到視覺上的效果。在文字消失時當即消失，出現時則加入延遲執行。

終於不用踩overflow的坑了。