如何解决JS addClass
我想在div出现时添加幻灯片动画。
我目前正在旧应用中重写代码,并且正在使用flex以使其具有响应性
问题
我的ID和内容分别为三个div:
- 第一个响应点击并在第二个响应中加载一堆信息
- 第二个点击发生反应时,它具有使第三个出现的内容而第一个消失的内容
- 第三个处于隐藏状态,等待第二个单击所触发
我希望所有这些出现和消失的动画都像以前一样平滑
现有解决方案(无弹性)
创建了一个动画,其中第三个div具有绝对显示,幻灯片只是将div从屏幕外移动到屏幕中。它不适用于响应式应用程序。
我的解决方案
第二个div中的点击会在第一个div中添加一个“隐藏”类,该类在点击的项目和第三个div中处于活动状态
$("span.choose-person").on("click",function () {
$("#inputEmail").val($(this).attr("mail"));
$("span.back-theme").show();
$("#step").show();
$("#step").addClass("active");
$("span.choose-person").removeClass("active");
$(this).addClass("active");
$("span.choose-person b").remove();
//setTimeout(function() {
$("#large").addClass("hide");
$("#large").hide();
//},500);
});
$("span.back-theme").on("click",function () {
$("span.back-theme").hide();
$(".tabs .contact").show();
$("span.choose-person").removeClass("active").addClass("hide");
$("#large").removeClass("hide").addClass("active");
//setTimeout(function(){
$("#listeMembres").hide();
$("#step").hide();
$("#large").show();
$("span.choose-person b").remove();
//},500); //Same time as animation
});
.hide {
display: inline-flex;
max-width: 0;
transition: all 3s ease;
will-change: transform;
}
#step .active {
display: inline-flex;
max-width: 570px;
transition: all 3s ease;
will-change: transform;
}
我无法使动画发生,有任何线索吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。