Javascript 淡入淡出取决于活动类，淡入有效，淡出无效

这可能是最好的小提琴观看

这是一个简单的淡入/淡出幻灯片。显示的幻灯片具有“活动”类。它应该在下一张幻灯片淡入之前淡出。相反，它会立即消失。下一张幻灯片的淡入效果良好

这是基本的html代码

var x=document.getElementById（“内部组合包装”）.childElementCount；
var j=1；
var-k；
函数clickMe（）{
如果（x>1）{
如果（j==x）{
j=1；
k=x；
}否则{
k=j；
j++；
}
console.log（“j=”+j）；
console.log（“k=“+k”）；
document.getElementById（“公文包项目-”+k）.style.display=“无”；
document.getElementById（“公文包项目-”+j）.style.display=“块”；
document.getElementById（“公文包项-”+j）.classList.add（“活动”）；
document.getElementById（“组合项-”+k）.classList.remove（“活动”）；
}
}

#内部公文包包装器{
位置：相对位置；
宽度：150px；
高度：50px；
}
.投资组合项目{
显示：无；
动画：Fadein2S；
}
.投资组合项目.活动{
显示：块；
动画：淡出2s；
}
.投资组合项目：第一个孩子{
显示：块；
}
@关键帧淡出{
从{
不透明度：1；
}
到{
不透明度：0；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

项目1
项目2
项目3
点击我

目前，

淡出

动画不起作用，因为单击按钮会立即从项目中删除

.active

，并获得样式

显示：无

要获得所需的效果，您的

onClick

功能唯一要做的就是触发

fadeOut

动画。接下来的所有动作都必须作为

animationEnd

事件的回调调用

您还需要对样式进行一些更改：

.portfolio-item {
   display: none;
}

.portfolio-item.active {
   display: block;
   animation: fadeIn 2s;
}

.portfolio-item.active.out {
   display: block;
   animation: fadeOut 2s;
}

最后，它起作用了：

//检测支持的事件属性名称并将其分配给变量
//David Walsh的职能：http://davidwalsh.name/css-animation-callback
函数whichAnimationEvent（）{
var t，
el=document.createElement（“fakeelement”）；
变量动画={
“动画”：“动画结束”，
“OAnimation”：“oAnimationEnd”，
“MozAnimation”：“animationend”，
“WebkitAnimation”：“webkitAnimationEnd”
}
对于（动画中的t）{
如果（el.style[t]！==未定义）{
返回动画[t]；
}
}
}
var animationEvent=whichAnimationEvent（）；
//声明全局变量
var total=document.getElementById（“内部投资组合包装”）.childElementCount；
var currentNum=1
nextNum变种；
//获取所有公文包项将它们添加到事件侦听器
var items=document.getElementById（“内部组合包装”）.children
对于（变量i=0；i1）{
var currentElement=document.getElementById（“组合项目-”+currentNum）；
nextNum=（currentNum==总计）？1:currentNum+1
currentElement.classList.toggle（'out'）
}
}

#内部公文包包装器{
位置：相对位置；
宽度：150px；
高度：50px；
}
.投资组合项目{
显示：无；
}
.portfolio-item.active{
显示：块；
动画：Fadein2S；
}
.portfolio-item.active.out{
显示：块；
动画：淡出2s；
}
@关键帧淡出{
从{
不透明度：1；
}
到{
不透明度：0；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}

项目1
项目2
项目3
点击我

CSS中有一个空格。。活动未与您的元素链接，它应该是

。公文包项目。活动

您必须延迟设置

显示：无

，直到动画有时间完成。删除活动类，为动画持续时间设置一个超时，然后在超时完成时切换为“无”。@TemaniafYeah如果空间最初不在那里，我在疑难解答时将其添加为“否”avail@DanielBernardi啊。我打赌你是对的。不幸的是，这都是在一个更大的setInterval函数中运行的，它不允许我这样做。我可能不得不完全打破它。或者，你可以使用

visibility:hidden；指针事件：无

隐藏元素而不是

显示：无

。