Javascript 提前停止CSS转换

我有一个问题，我的CSS转换被提前切断，我不知道为什么会发生这种情况。我认为这与子元素上的另一个转换有关，因为如果我删除使子元素转换的代码，容器的转换就可以了

代码有点长，我正在使用一个名为的库，它应该允许我在元素之间转换，就像它们是卡片一样

这是相关HTML的结构：

<ul id="cards" class="baraja-container">
  <li id="usa-germany" class="card">
    <div id="room-info">
      <h1 id="room-name">USA vs. Germany</h1>
      <p class="room-description">
        Live game discussion with Berkeley alumni. Let's go America!
      </p>
    </div>

    <div id="thumbnails-container">
      <div id="thumb-0" class="thumb">
        <div id="message-0" class="message-popup first">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-1" class="thumb">
        <div id="message-1" class="message-popup top">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-2" class="thumb">
        <div id="message-2" class="message-popup">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-3" class="thumb">
        <div id="message-3" class="message-popup">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-4" class="thumb">
        <div id="message-4" class="message-popup top right">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-5" class="thumb">
        <div id="message-5" class="message-popup top right">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
    </div>
  </li>


  <li class="card">
    <div id="room-info">
      <h1 id="room-name">CET @ Cal</h1>
      <p class="room-description">
        Discussion around Cal's Center for Entreneurship and Technology
      </p>
    </div>

    <div id="thumbnails-container">
      <div id="thumb-0" class="thumb">

        <div id="message-0" class="message-popup first">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-1" class="thumb">
        <div id="message-1" class="message-popup top">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-2"  class="thumb">
        <div id="message-2" class="message-popup">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-3" class="thumb">
        <div id="message-3" class="message-popup right">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-4" class="thumb">
        <div id="message-4" class="message-popup top right">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-5" class="thumb">
        <div id="message-5" class="message-popup top right">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
    </div>
  </li>


  <li class="card">
    <div id="room-info">
      <h1 id="room-name">Yoga Masters</h1>
      <p class="room-description">
        Masters of Yoga may gathers here to discuss their art and practice techniques
      </p>
    </div>

    <div id="thumbnails-container">
      <div id="thumb-0" class="thumb">

        <div id="message-0" class="message-popup first">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-1" class="thumb">
        <div id="message-1" class="message-popup top">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-2"  class="thumb">
        <div id="message-2" class="message-popup">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-3" class="thumb">
        <div id="message-3" class="message-popup right">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-4" class="thumb">
        <div id="message-4" class="message-popup top right">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
      <div id="thumb-5" class="thumb">
        <div id="message-5" class="message-popup top right">
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
          <span class="dot">&bull;</span>
        </div>
      </div>
    </div>
  </li>
</ul>

下面是驱动它的JavaScript代码：

var animateDots = function(dots, i, numDots) {
  var currDot = $(dots[i]);
  currDot.css('transform', 'translateY(-4px)');
  currDot.css('-webkit-transform', 'translateY(-4px)');

  currDot.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    $(this).css('transform', 'translateY(0)');
    $(this).css('-webkit-transform', 'translateY(0)');
  });
};

var showPopup = function(popup) {
  // Shows the popup passed in and animates its dots
  if (popup.hasClass('show')) {
    return;
  }

  // 'show' popup
  popup.addClass('show');

  // start transition on dots
  var dots = popup.find('.dot'),
      i = 0,
      numDots = dots.length;

  if (dots) {
    animateDots(dots, i, numDots);
    i = (i + 1) % numDots;

    popup[0].dotInterval = setInterval(function() {
      animateDots(dots, i, numDots);
      i = (i + 1) % numDots;
    }, 350);
  }
};


$(function() {

  // return;
  var baraja = $('#cards').baraja();

  $('#next').on('click', function(e) {
    e.preventDefault();

    // stop current transitions
    if (popupInterval) {
      clearInterval(popupInterval);
    }

    baraja.next();
  });

  $('#close').on('click', function(e) {
    e.preventDefault();

    baraja.close();
  });

  var popupInterval = setInterval(function() {
    var popups = $('#usa-germany .message-popup'),
        numPopups = popups.length,
        rand = Math.floor(Math.random() * numPopups),
        popup = $(popups[rand]);

    while (popup.hasClass('show')) {
      rand = Math.floor(Math.random() * numPopups);
      popup = $(popups[rand]);
    }

    showPopup(popup);

    setTimeout(function() {
      // Schedule the popup to hide
      popup.removeClass('show');

      popup.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
        var popup = $(this);
        clearInterval(popup[0].dotInterval);
      });
    }, 3600);
  }, 2000);
});

---

很难在JSFIDLE或类似工具上设置所有内容，但基本上，消息弹出div从

scale（0）

到

scale（1）

，然后

span.dot

在每次转换中向上和向下移动。如果卡内没有任何其他转换，则卡转换是正常的。你不应该在其他CSS转换中有CSS转换吗？我该怎么做？还是setInterval/setTimeout有问题

Baraja库侦听父元素上的

transitionend

事件，该事件从子元素的

transitionend

事件中冒泡而出。要停止此操作，请在对

transitionend

事件的回调中，对传入的事件调用

stopPropagation（）

，如下所示：

$el.on('transitionend', function(e) {
    e.stopPropagation();
    // do stuff
});

---

当你想在子元素上以及子元素的父元素上链接转换时相关的（很多文本和代码），小提琴会更好等我弄明白了-我会发布一个响应

$el.on('transitionend', function(e) {
    e.stopPropagation();
    // do stuff
});