我似乎无法让这个过渡的开始部分起作用,只有结束部分。
我之所以按照我的方式构建我的 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();
最佳答案
你接近解决方案了,我做了一些小改动,我删除了 addAnimatingClass(galleryMenuListItems)
并更改了 displayGalleryMenuListItems(galleryMenuListItems
。看:
function displayGalleryMenuListItems (galleryMenuListItems) {
return setTimeout(function(){
galleryMenuListItems.classList.add('gallery_menu__revealable--visible')
},300)
}
这是一个有效的 fiddle :https://jsfiddle.net/xg5fhyst/
关于javascript - 向元素添加 `transitionend` 事件监听器只会导致动画反向触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57804052/