向元素添加`transitionend`事件侦听器只会导致动画反向触发

Question

我似乎无法使转换的开始部分起作用，而只能使结束部分起作用。

我按照自己的方式构造html的原因是，我需要使用display: none和display:block从文档流中实际删除元素。 一般说来，使用display来显示和隐藏元素与动画结合时是有问题的，因此，其思想是使容器元素服从display规则，并使子元素具有动画效果。

参见我的代码和/或JSBin ：

<button id="gallery_menu__trigger">Click me now</button>

<div id="gallery_menu__list">
  <div id="gallery_menu__list_items" class="gallery_menu__revealable">Hello!</div>
</div>

CSS：

#gallery_menu__list {
  display:none;
}

.gallery_menu__revealable {
  transform: translatey(-20px);
  opacity: 0;
  will-change: transform, opacity;
  transition: all .3s ease;
}

.gallery_menu__revealable--visible {
  transform: translateX(0);
  opacity: 1;
}

.gallery_menu__revealable--animating {
  transition: all .3s ease;
}

和JS：

function init () {
  var galleryMenuTrigger = document.getElementById('gallery_menu__trigger');
  var galleryMenuList = document.getElementById('gallery_menu__list');
  var galleryMenuListItems = document.getElementById('gallery_menu__list_items');

  galleryMenuTrigger.addEventListener('click', toggleGalleryMenu(galleryMenuList, galleryMenuListItems), false)
  galleryMenuListItems.addEventListener('transitionend', onTransitionEnd(galleryMenuListItems), false)
}


function toggleGalleryMenu (galleryMenuList, galleryMenuListItems) {
  return function () {
    if (galleryMenuList.style.display === 'block') {
      addAnimatingClass(galleryMenuListItems)
      closeGalleryMenuListItems(galleryMenuListItems);
      setTimeout(closeGalleryMenu(galleryMenuList), 300);
      return;
    }

    displayGalleryMenu(galleryMenuList)
    addAnimatingClass(galleryMenuListItems)
    displayGalleryMenuListItems(galleryMenuListItems);
  }
}

function addAnimatingClass (galleryMenuListItems) {
  galleryMenuListItems.classList.add('gallery_menu__revealable--animating')
}

function onTransitionEnd (galleryMenuListItems) {
  return function () {
     return galleryMenuListItems.classList.remove('gallery_menu__revealable--animating');
  }
}

function displayGalleryMenu (galleryMenuList) {
  galleryMenuList.style.display = 'block'
}

function closeGalleryMenu (galleryMenuList) {
  return function() {
    return galleryMenuList.style.display = 'none'
  }
}

function displayGalleryMenuListItems (galleryMenuListItems) {  
  return galleryMenuListItems.classList.add('gallery_menu__revealable--visible')
}

function closeGalleryMenuListItems (galleryMenuListItems) {
  return galleryMenuListItems.classList.remove('gallery_menu__revealable--visible')
}



init();

Answer 1

您已经接近解决方案，我做了一些更改，删除了addAnimatingClass(galleryMenuListItems)并更改了displayGalleryMenuListItems(galleryMenuListItems 。

function displayGalleryMenuListItems (galleryMenuListItems) {  
  return setTimeout(function(){
   galleryMenuListItems.classList.add('gallery_menu__revealable--visible')
  },300)
}

这是一个有效的小提琴： https : //jsfiddle.net/xg5fhyst/