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

Question

我似乎无法让这个过渡的开始部分起作用，只有结束部分。

我之所以按照我的方式构建我的 html，是因为我需要使用 display: none 和 display:block 来实际删除元素文档流。使用 display 来显示和隐藏元素一般来说在与动画结合时是有问题的，所以想法是让容器元素服从 display 规则，并让 child 元素动画。

查看我的代码和/或 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)
}

这是一个有效的 fiddle :https://jsfiddle.net/xg5fhyst/