【transitionEnd】解决如何在transition的时间结束后执行javascript

我自己遇到的问题

通过CSS  的 transition效果给容器的高度加过渡动画

eg：

...
<div class="DPCoachItem">
...
</div>
...

.DPCoachItem{
    height: 100px;
    transition: height 300ms ease;
    -moz-transition: height 300ms ease;  
    -webkit-transition: height 300ms ease;
}
当容器DPCoachItem的高度发生变化的时候，执行transition过渡，但是问题来了，下面代码
var box = document.querySelectorAll(".DPCoachItem")[0];

function showBoxContent() {
    box.setAttribute('style', 'height:300px');
    ...
    this.resizeScroll();//滚动条resize
}

function hideBoxContent() {
    box.setAttribute('style', 'height:100px');    
    ...
    this.resizeScroll();//滚动条resize
}

不难发现，当执行 showBoxContent 或者 hideBoxContent时，resizeScroll()方法是在 transition 过渡结果前就已经执行完了 ，所以无论怎么show/hide 滚动条是不会动的之前我的解决办法是加 setTimeout方案一：

function showBoxContent() {
    box.setAttribute('style', 'height:300px');
    ...
    setTimeout(function() {
        this.resizeScroll();//滚动条resize
    }, 300);
}

function hideBoxContent() {
    box.setAttribute('style', 'height:100px');
    ...
    setTimeout(function() {
        this.resizeScroll();//滚动条resize
    }, 300);
}

ok,是解决了，但是总是感觉 太多 timeout不好，于是。。。

方案二：

<span style="font-family:Menlo,monospace;">box.addEventListener('webkitTransitionEnd', function() {</span>
    this.resizeScroll();//滚动条resize
}.bind(this));

这样就不用计时器计时了，只要css动画结束后会自动执行transitionEnd方法

亲测：chrome firefox safari 都兼容