Javascript 显示子节时在父div上使用转换展开

我有一个容器div，里面有一个表单，默认情况下submit按钮是隐藏的。单击

welcomeSettingsIcon

按钮，我在submit按钮中淡入淡出状态，父div会自行扩展。此扩展类似于快照式的显示/隐藏。我想要的是添加一个转换，这样父div就可以在提交按钮淡入开始之前，通过提交按钮空间的转换来扩展自己

我使用的方法是。但是，当我将其应用于代码时，父div在扩展时没有得到转换。另外，在提交按钮第一次淡入后，div会捕捉到它的新位置，当我再次关闭和打开时，按钮的高度会受到

open

class的影响，并且淡入会失去其效果

另外，当我删除类“open”时，

.bottom内容

的父类不会关闭

HTML:

jQuery：

jQuery(document).ready(function() {
    var welcomeForm = false;
    jQuery('#welcomeSettingsIcon').click(function() {
        if (welcomeForm) {
             jQuery('#welcomeSubmitBtn').css('opacity', 0);
             jQuery('#welcomeSubmitBtn').hide();
             jQuery('.bottom-content').removeClass('open'); 

             welcomeForm = false;
        } else {
             jQuery('#welcomeSubmitBtn').show();
             jQuery('#welcomeSubmitBtn').css('opacity', 1);
             jQuery('.bottom-content').addClass('open');   

             welcomeForm = true;
        }
    }
})

---

我不是100%清楚你在找什么，所以如果接近，请告诉我。我认为没有必要使用

open

类，除非您真的想在CSS中完成这一切：

jQuery（文档）.ready（函数（）{
var-welcomeForm=false；
jQuery（'#welcomeSettingsIcon'）。单击（函数（）{
国际单项体育联合会（欢迎表格）{
jQuery（'#welcomeSubmitBtn'）.hide（）；
jQuery（'.bottom content'）.hide（）；
welcomeForm=假；
//jQuery（'#welcomeSubmitBtn'）.css（'opacity'，0）；
//jQuery（'#welcomeSubmitBtn'）.hide（）；
//jQuery（'.bottom content'）.removeClass（'open'）；
}否则{
jQuery（'.bottom content'）.slideDown（2000，function（）{
jQuery（'#welcomeSubmitBtn'）.fadeIn（）；
welcomeForm=正确；
//jQuery（'#welcomeSubmitBtn'）.show（）；
//jQuery（'welcomeSubmitBtn'）.css（'opacity'，1）；
//jQuery（'.bottom content'）.addClass（'open'）；
})
}
});
});
/*。底部内容{
变换：scaleY（0）；
过渡：转换250ms缓进；
变换原点：顶部；
}
.bottom-content.open{
变换：scaleY（1）；
}
.bottom-content.open#WelcomeSubmitbttn{
不透明度：1；
}
#欢迎光临{
边缘顶部：20px；
不透明度：0；
过渡：不透明度0.5s；
过渡延迟：250ms；
}
*/
.底部内容{
显示：无；
高度：60px；
}
#欢迎光临{
显示：无；
边缘顶部：20px；
}

点击我
//形式元素

我不是100%清楚你在找什么，所以如果很接近，请告诉我。我认为没有必要使用
open
类，除非您真的想在CSS中完成这一切：


jQuery（文档）.ready（函数（）{
var-welcomeForm=false；
jQuery（'#welcomeSettingsIcon'）。单击（函数（）{
国际单项体育联合会（欢迎表格）{
jQuery（'#welcomeSubmitBtn'）.hide（）；
jQuery（'.bottom content'）.hide（）；
welcomeForm=假；
//jQuery（'#welcomeSubmitBtn'）.css（'opacity'，0）；
//jQuery（'#welcomeSubmitBtn'）.hide（）；
//jQuery（'.bottom content'）.removeClass（'open'）；
}否则{
jQuery（'.bottom content'）.slideDown（2000，function（）{
jQuery（'#welcomeSubmitBtn'）.fadeIn（）；
welcomeForm=正确；
//jQuery（'#welcomeSubmitBtn'）.show（）；
//jQuery（'welcomeSubmitBtn'）.css（'opacity'，1）；
//jQuery（'.bottom content'）.addClass（'open'）；
})
}
});
});
/*。底部内容{
变换：scaleY（0）；
过渡：转换250ms缓进；
变换原点：顶部；
}
.bottom-content.open{
变换：scaleY（1）；
}
.bottom-content.open#WelcomeSubmitbttn{
不透明度：1；
}
#欢迎光临{
边缘顶部：20px；
不透明度：0；
过渡：不透明度0.5s；
过渡延迟：250ms；
}
*/
.底部内容{
显示：无；
高度：60px；
}
#欢迎光临{
显示：无；
边缘顶部：20px；
}

点击我
//形式元素

你能为这件事提供提琴吗？我试过做提琴，但js部分不行：你能为这件事提供提琴吗？我试过做提琴，但js部分不行：归因：这个答案大部分是基于归因：这个答案大部分是基于
.bottom-content {
  transform: scaleY(0);
  transition: transform 250ms ease-in;
  transform-origin: top;
}

.bottom-content.open {
  transform: scaleY(1);
}
.bottom-content.open #welcomeSubmitBtn {
  opacity: 1;
}

#welcomeSubmitBtn {
  margin-top: 20px;
  opacity: 0;
  transition: opacity 0.5s;
  transition-delay: 250ms;
}

jQuery(document).ready(function() {
    var welcomeForm = false;
    jQuery('#welcomeSettingsIcon').click(function() {
        if (welcomeForm) {
             jQuery('#welcomeSubmitBtn').css('opacity', 0);
             jQuery('#welcomeSubmitBtn').hide();
             jQuery('.bottom-content').removeClass('open'); 

             welcomeForm = false;
        } else {
             jQuery('#welcomeSubmitBtn').show();
             jQuery('#welcomeSubmitBtn').css('opacity', 1);
             jQuery('.bottom-content').addClass('open');   

             welcomeForm = true;
        }
    }
})