Javascript owl旋转木马幻灯片中的元素将在css动画发生之前显示

owl旋转木马幻灯片中的元素将在动画开始之前显示（fadeInUp和zoomIn）。它们在动画之前不应可见。在第一张幻灯片中，它们表现良好，但在第二张幻灯片中，您可以看到它们总是在css动画发生之前出现

检查这把小提琴：

//启动英雄滑块初始化代码
$（文档）.ready（函数（）{
var heroslaider=$（'.owl carousel'）；
猫头鹰旋转木马({
动画衰减：“衰减”，
animateIn:“fadeIn”，
自动播放超时：5000，
自动播放暂停：对，
循环：对，
保证金：0，
导航：错，
mouseDrag:错，
真的，
pullDrag:false，
自由拖动：错误，
点：是的，
自动播放：对，
响应：{
0: {
项目：1
},
600: {
项目：1
},
1000: {
项目：1
}
}
});
//结束英雄滑块初始化代码
//每次加载幻灯片时开始重新激活css动画
heroSlider.on（“changed.owl.carousel”），函数（事件）{
//选择当前活动项
var item=event.item.index-2；
//首先删除所有标题的动画
$（'h1，p'）.removeClass（'fadeInUp'）；
$（'a'）.removeClass（'zoomIn'）；
$（'.owl item'）.not（'.cloned'）.eq（item）.find（'h1，p'）.addClass（'fadeInUp'）；
$（'.owl item'）.not（'.cloned'）.eq（item）.find（'a'）.addClass（'zoomIn'）；
})
});
/*开始按钮*/
.btn.btn-default{
显示：内联块；
边界：无；
颜色：#fff；
填充：15px；
边界半径：38px；
位置：相对位置；
背景色：#4ac8ed；
z指数：1；
}
.btn.btn默认值：之后{
位置：绝对位置；
边界：无；
内容：''；
排名：0；
颜色：白色；
左：0；
宽度：100%；
身高：100%；
边界半径：38px；
背景：#2f7c93；
过渡：不透明度0.3s缓和；
z指数：2；
不透明度：0；
}
.btn.btn默认值：悬停：之后{
不透明度：1；
}
.btn.btn-default i{
-webkit转换：.5s；/*用于Safari 3.1到6.0*/
过渡：放松；
位置：相对位置；
填充：0；
保证金：0；
垂直对齐：中间对齐；
}
.btn.btn默认值：悬停i{
转化：translateX（5px）；
}
.btn.btn-默认值b、i、span{
位置：相对位置；
z指数：3；
}
/*结束按钮*/
.猫头鹰主题.猫头鹰点.猫头鹰点：焦点{
大纲：无！重要；
}
.猫头鹰传送带.猫头鹰物品img{
指针事件：无；
}
.padding_zero{溢出：隐藏；}
.居中{
位置：绝对位置；
利润上限：-250px；
左：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}
.居中span{font-weight:700；}
法代努普先生{
动画持续时间：.8s！重要；
动画延迟：.8s；
}
@关键帧缩放{
从{
不透明度：0；
变换：scale3d（.3、.3、.3）；
}
到{
不透明度：1；
}
}
.zoomIn{
动画名称：zoomIn；
}
@关键帧淡入淡出{
从{
不透明度：0；
转换：translate3d（0,100%，0）；
}
到{
不透明度：1；
转化：无；
}
}
法代努普先生{
动画名称：法德努普；
}
.it1.zoomIn{
动画持续时间：.8s！重要；
动画延迟：1.2s；
}
.it2.zoomIn{
动画持续时间：.8s！重要；
动画延迟：1s；
}
.item1 b{字体大小：14px；字体重量：300；}
.item1 h1{字体大小：65px；行高：65px；}
.item1 p{字体大小：20px；}
.item2 h1{字体大小：65px；}
.item2 p{字体大小：20px；}
.item2 b{字体大小：14px；字体重量：300；}

和我们一起开始你的项目吧！
-让您的伟大想法成为现实-
我们有解决方案
Lorem ipsum door sit amet，concetetur adipising
Lorem2 ipsum dolor。
您的问题之所以出现，是因为您在幻灯片转换完成后进行了更改。使用“translate”事件而不是“changed”应该会有所帮助

试着改变

heroslaider.on（“已更改”.owl.carousel”，函数（事件）{}）

到

heroslaider.on（“translate.owl.carousel”，函数（事件）{}）

还要保持猫头鹰旋转木马项目中的类一致，第二个旋转木马项目子项中缺少动画类

<h1 class="animated mr-0"></h1>
<p class="my-1 my-md-4 animated"></p>
<a class=" animated"></a>



它不工作了。。。但是你可以在这里测试代码：现在试试，我之前犯了一个错误，它是翻译而不是转换。还为第二个旋转木马项目子项添加动画类。不要在这里添加fadeInUp类。脚本将添加它。