Question

此刻，我正在用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）图标在右上角缩小，文本区域出现在容器中，但是它比图标小得多，因此容器大小会发生变化。但是，更改相当突然，与设计不符。

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

#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尝试了相同的设置，但是它不起作用。容器的大小只是根据文本框的大小而立即改变，并且看起来不是很漂亮。非常感谢您的建议！

Answer 1

如果您创建代码段更好，那么我们也可以看到您的结果。但是我认为，如果您使用此CSS代码，则会得到正确的结果：

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

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

1 个答案: