无法使用过渡调整 <div> 容器的大小答案

【问题标题】：Can't resize <div> container with the use of transitions无法使用过渡调整 <div> 容器的大小
【发布时间】：2019-09-09 11:13:58
【问题描述】：

我现在正在用 HTML/CSS 构建一个页面，但遇到了过渡动画的问题。一些上下文。首先是 HTML 代码：

这是 HTML 代码：

<body>
    <div class="container">  
        <form id="contact" action="" method="post">
            <i id="icon" style="display: block" class="fas fa-check-circle"></i>
            <h3 class="success-msg">Your <a class="script-link" onclick="myFunction()">script</a> has been approved! <i id="icon2" style="display: none" class="fas fa-check-circle"></i></h3>
            <fieldset>
            <textarea class = "textarea-script" id="script" style="display: none;"></textarea>
            </fieldset>
        </form>
    </div>

<script>
$(document).ready(function(){
 $(".script-link").click(function() {
   $("#icon").hide();
   $("#icon2").show();
   $("#script").show(); 
 });
});

其背后的想法是：1) 来自 Font-Awesome 的图标显示成功，2) 一句话说明您的脚本已被批准运行，3) 您可以单击脚本（这是一个超链接），这是我写了一些小的 javascript 函数来隐藏图标（并在角落显示一个较小的图标），并显示一个包含相关脚本的文本框。

我使用了一些动画来使所有的过渡（比如大图标到小图标）看起来很流畅。但是，当容器切换大小时，就会出现困难。会发生什么：

i) 我单击“脚本”超链接。 ii) 图标在右上角缩小，textarea 出现在容器中，但它比图标小得多，因此容器大小发生变化。但是，这种变化相当突然，与设计不符。

我研究了转换并尝试了以下方法：

#contact {
    background: #F9F9F9;
    padding: 25px;
    margin: 150px 0;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    transition:all 5s;  /* this */ 
  }

我也为.container 尝试了相同的设置，但它不起作用。容器大小会根据文本框的大小立即改变，看起来不是很漂亮。非常感谢您的建议！

【问题讨论】：

标签： javascript html css frontend

【解决方案1】：

如果您创建一个代码的 sn-p 会更好，这样我们也可以看到您的结果。但我认为如果你使用这个 css 代码，你会给出正确的结果：

#contact *, #contact{
    transition: all 5s linear !important
 }

【讨论】：