巧用“双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的坑了。