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