简单小动画，transtion执行完之后增加操作

<div class="slide">你好年是否能啊开会fire卡无花果卡无花果我热裤和瓦工呵呵我个人 无花果仍沃化工二哦无人敢惹格尔供热个人隔热供热个个人更个人个人个人而隔热供热而隔热供热隔热个人股二个人二个人</div>
    <div class="opendbtn">展开</div>

var slide=document.querySelector('.slide');
    var obtn=document.querySelector('.opendbtn');
    function whichTransitionEvent(){
   var t,
        obtn=document.querySelector('.opendbtn'),
       transitions = {
         'transition':'transitionend',
         'OTransition':'oTransitionEnd',
         'MozTransition':'transitionend',
         'WebkitTransition':'webkitTransitionEnd'
       }
 
       for(t in transitions){
           if( obtn.style[t] !== undefined ){
               return transitions[t];
           }
       }
   }
 
   var transitionEvent = whichTransitionEvent();
   function endtrans(end){
        transitionEvent && slide.addEventListener(transitionEvent, function() {
           end()
            slide.removeEventListener(transitionEvent,arguments.callee,false);
            //销毁事件
         });
   }
    obtn.onclick=function(){
        if(slide.classList.contains('slideactive')){
            slide.classList.remove('slideactive');
            endtrans(function(){
                obtn.innerHTML='展开'
            })
        }else{
            slide.classList.add('slideactive');
            endtrans(function(){
                obtn.innerHTML='收起'
            })
        }
        
    }