Chrome中基于Transitionend的转换循环中断

Question

我有非常基本的基于承诺的自我调用功能：

• 收集具有特定类别的div
• 检查他们是刚刚向左或向右移动
• 基于结果可以选择移动（transform: translate）它们 使用classList.add() / classList.remove()
• 和transitionend - 自称

这是功能：

function transitionTest(){
          console.log('called --- transitionTest() ');

          var dummies = document.getElementsByClassName('dummy'),
          count = dummies.length;

          if(window.cache==='right'){
              var transitionCollection=0;
              for(var i = 0; i < dummies.length; i++){
                  dummies[i].classList.remove('right');
                  dummies[i].addEventListener('transitionend', function(){ 
                      transitionCollection++; 
                      if( transitionCollection === dummies.length ){
                          transitionTest();
                      }  
                  });                  

              }              
              window.cache='';
          } else {
              var transitionCollection=0;
              for(var i = 0; i < dummies.length; i++){
                  dummies[i].classList.add('right');
                  dummies[i].addEventListener('transitionend', function(){ 
                      transitionCollection++; 
                      if( transitionCollection === dummies.length ){
                          transitionTest();
                      }  
                  });

              }        
              window.cache='right';

          }

，此处为working fiddle

那么，出了什么问题？

• 没有，如果您通过现代浏览器访问，但不最新版本 Windows上的Chrome浏览器
• 没有，如果您通过Windows上的最新版Chrome访问，但不会导致任何鼠标事件，例如mouseenter / leave，click，甚至是窗口focus事件（例如，如果你静止不动）
• 如果你这样做，在不明确的情况下，虚拟div的无限左右移动偶尔会破坏

出了什么问题：

虚拟div，在mouseenter，mouseleave，click上无限左右移动，有时，有时不会（确切条件不明确）将：< / p>

• 在没有转换的情况下结束CSS值并在一段时间后恢复正常操作
• 完全停止并在一段时间后恢复正常操作
• 放慢速度（！？是的，我希望我开玩笑）并停止/去结束CSS值

这些错误发生在Chrome 45（Win 7）和Chrome 42（Win XP）中 - 这是我现在能够测试的平台。需要注意的是，上层代码不需要跨浏览器，我完全了解其含义。