CSS过渡早期切断

Question

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

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

这是相关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>

这是相关的CSS：

  #cards {
    width: 100%;
    height: 260px;
    overflow: visible;
    margin: 0;
  }

  .card {
    padding: 30px 20px;
    border: 1px solid #CCC;
    border-radius: 4px;
    background: #F5F5F5;

    h1 {
      margin-top: 0;
    }
  }

.thumb {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 20px;
  border: 2px solid #9A9A9A;
  position: relative;
  background: #EEE;
  cursor: pointer;
  margin-right: 10px;

  &:last-of-type {
    margin-right: 0;
  }

  background-size: 100% 100%;

  #message-0 {
    background: #E26A6A;

    &::before {
      border-bottom: 7px solid #E26A6A;
    }
  }

  #message-1 {
    background: #EB9532;
    &::before {
      border-top: 7px solid #EB9532;
    }
  }

  #message-2 {
    background: #66CC99;

    &::before {
      border-bottom: 7px solid #66CC99;
    }
  }

  #message-3 {
    background: #3498DB;

    &::before {
      border-bottom: 7px solid #3498DB;
    }
  }

  #message-4 {
    background: #67809F;

    &::before {
      border-top: 7px solid #67809F;
    }
  }

  #message-5 {
    background: #95A5A6;

    &::before {
      border-top: 7px solid #95A5A6;
    }
  }

  .message-popup {
    display: block;
    position: absolute;
    z-index: 9000;
    top: 37px;
    left: 7px;
    background: #DDD;
    border: 1px solid #CCC;
    color: white;
    transform: scale(0);
    -webkit-transform: scale(0);
    transform-origin: 10px -12px;
    padding: 5px 5px;
    width: 40px;
    text-align: center;
    border-radius: 3px;
    font-size: 13px;

    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.34, 1.2, 0.7, 1);

    letter-spacing: -1px;

    &::before {
      content: "";
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      background: transparent;
      position: absolute;
      top: -5px;
      left: 3px;
    }

    &.show {
      transform: scale(1);
      -webkit-transform: scale(1);
    }

    &.right {
      right: 7px;
      left: auto;
      transform-origin: 30px -12px;

      &::before {
        left: auto;
        right: 3px;
      }
    }

    &.top {
      top: -27px;
      transform-origin: 10px 39px;

      &.right {
        transform-origin: 30px 39px;
      }

      &::before {
        top: 25px;
      }
    }

    .dot {
      transition-property: transform, -webkit-transform;
      transition-duration: 0.45s;
      transition-timing-function: ease-in-out;
    }
  }
}

以下是驱动它的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);
});

很难在JSFiddle或类似设置上设置所有内容，但基本上.message-popup div从scale(0)到scale(1) ，然后是每个转换中的span.dot ，然后随着时间的推移返回。 如果内部没有任何其他过渡，则卡过渡很好。 你不应该在其他CSS过渡中有CSS过渡吗？ 我该如何解决这个问题？ 或者是setInterval / setTimeout的问题？

Answer 1

Baraja库侦听父元素上的transitionend事件，该元素从子元素的transitionend事件中冒出来。 要停止这一点，在回调至transitionend事件，调用stopPropagation()传递在像这样的事件：

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

与您想要在子转换以及子元素的父元素上链接转换的时间相关