Question

我有页面过渡动画，我滑出第一页并在第二页中滑动。我正在利用transitionend事件来检测每次转换何时完成，而不是使用setTimeout。

这在最新版本的FireFox和Chrome中运行良好，但无法在Internet Explorer 10或11中运行。

以下是我工作示例的JavaScript：

const $body = $('body');
let animating = false;
let template = null;

const transitionEvent = () => {
  let el = document.createElement('test');
  let transitions = {
    'transition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'MozTransition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd'
  };

  for (let transition in transitions) {
    if (el.style[transition] !== void 0) {
      return transitions[transition];
    }
  }
}

const endAnimation = ($currentPage, $nextPage) => {
  animating = false;
  resetPage($currentPage, $nextPage);
};

const resetPage = ($currentPage, $nextPage) => {
  $currentPage.remove();
  $nextPage.removeClass().addClass('body-content current-page').removeAttr('style');
  $body.removeClass('lock');
  window.scrollTo(0, 0);
  console.log('done');
};

const nextUp = (e) => {
  e.preventDefault();

  if (animating) {
    return false;
  }

  animating = true;
  let $bodyContent = $('.body-content');
  let $node = $('<div class="body-content" />');
  let $page = $(`<div class='page'/>`);
  let transitionEnd = transitionEvent();

  if (template === null) {
    template = $bodyContent.find('.page').html();
  }

  $body.addClass('lock');
  $node.append($page);
  $page.append(template);
  $body.find('script').first().before($node)

  let $currentPage = $('.body-content.current-page');
  let $nextPage = $('.body-content').last();

  $nextPage.css({
    'transform': `translateY(${$currentPage.height()}px)`
  });

  $currentPage.addClass('scale-down').one(transitionEnd, () => {
    $nextPage.addClass('move-from-bottom forefront').css({
      'transform': `translateY(${window.scrollY}px)`
    }).one(transitionEnd, () => {
      endAnimation($currentPage, $nextPage);
    });
  });
};

$(document).on('click', '.next-up', nextUp);

$nextPage元素的transitionend回调无法触发，从而阻止了动画的完成。

我已经读过IE在transitionend和某些css属性方面存在一些问题，特别是flexbox。但是我没有使用flexbox，更重要的是，第一个元素的trasitionend回调按预期工作。知道我的例子可能是什么情况吗？

这是实际工作example。

IE 10＆amp; 11 - CSS转换事件未触发

0 个答案: