问题

我使用Bootstrap 3创建了一个可折叠的布局。

问题是“impacted-element”没有像“move-up”那样平滑地向下移动效果。

我该如何使它像向上移动一样慢慢向下移动？

这是我的代码：（请在全页中查看）

<!DOCTYPE html>
<html>
  <head>
    <title>Two Column Layout with Background Image and Expand</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <style>
      .first-column {
        background-image: url("https://plus.unsplash.com/premium_photo-1688114984765-308599ec1e13?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=774&amp;q=80");
        background-size: cover;
        min-height: 300px;
        transition-duration: 0.35s;
      }
      .second-column {
        min-height: 300px;
      }
      .expanded {
        min-height: 500px;
      }
      .impacted-element {
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      .impacted-element.collapsed {
        max-height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 first-column"></div>

        <div class="col-md-6 second-column">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum
            purus vel mauris ultrices, ac tincidunt risus interdum. Aenean at
            feugiat arcu. Nunc consectetur, nisi id venenatis suscipit, odio
            ipsum tincidunt ipsum, eu bibendum turpis lorem vel orci. In eu mi
            semper, varius quam nec, mattis odio. Vivamus venenatis odio nec
            libero egestas tincidunt. Nulla et sagittis mi, ut congue odio. Nam
            blandit mauris vitae lectus euismod, nec fermentum neque mattis.
          </p>
          <button id="expandBtn" class="btn btn-primary">Expand</button>
          <div id="expandedContent" style="display: none;">
            <p>
              Pellentesque id tortor ipsum. Vivamus vitae ligula a massa
              vestibulum scelerisque. Duis congue eros a quam tincidunt, eu
              elementum sem eleifend. Proin suscipit, elit a sagittis laoreet,
              libero lectus fermentum nisl, quis gravida elit massa id elit.
              Fusce tristique, sem id iaculis consectetur, est nunc aliquam
              massa, id consectetur lorem odio sit amet neque. Proin elementum
              euismod varius. Nam laoreet odio eu elit dapibus vehicula. Integer
              ultricies lacus vel tristique finibus.
            </p>
          </div>
        </div>
      </div>
      <div class="impacted-element">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum
          purus vel mauris ultrices, ac tincidunt risus interdum. Aenean at
          feugiat arcu. Nunc consectetur, nisi id venenatis suscipit, odio ipsum
          tincidunt ipsum, eu bibendum turpis lorem vel orci. In eu mi semper,
          varius quam nec, mattis odio. Vivamus venenatis odio nec libero
          egestas tincidunt. Nulla et sagittis mi, ut congue odio. Nam blandit
          mauris vitae lectus euismod, nec fermentum neque mattis.
        </p>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#expandBtn").click(function () {
          $("#expandedContent").slideToggle();
          $(".first-column, .second-column").toggleClass("expanded");
        });
      });
    </script>
  </body>
</html>

希望这可以帮助你。

英文:

I made a collapsible layout using Bootstrap 3.

The problem is the impacted-element doesn't have a smooth move-down effect like the move-up.

How can I make it move down slowly like move up?

Here is my code: (Please review in full page)

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Two Column Layout with Background Image and Expand&lt;/title&gt;
&lt;link
rel=&quot;stylesheet&quot;
href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&quot;
/&gt;
&lt;style&gt;
.first-column {
background-image: url(&quot;https://plus.unsplash.com/premium_photo-1688114984765-308599ec1e13?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=774&amp;q=80&quot;);
background-size: cover;
min-height: 300px;
transition-duration: 0.35s;
}
.second-column {
min-height: 300px;
}
.expanded {
min-height: 500px;
}
.impacted-element {
overflow: hidden;
transition: max-height 0.3s ease;
}
.impacted-element.collapsed {
max-height: 200px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6 first-column&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col-md-6 second-column&quot;&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum
purus vel mauris ultrices, ac tincidunt risus interdum. Aenean at
feugiat arcu. Nunc consectetur, nisi id venenatis suscipit, odio
ipsum tincidunt ipsum, eu bibendum turpis lorem vel orci. In eu mi
semper, varius quam nec, mattis odio. Vivamus venenatis odio nec
libero egestas tincidunt. Nulla et sagittis mi, ut congue odio. Nam
blandit mauris vitae lectus euismod, nec fermentum neque mattis.
&lt;/p&gt;
&lt;button id=&quot;expandBtn&quot; class=&quot;btn btn-primary&quot;&gt;Expand&lt;/button&gt;
&lt;div id=&quot;expandedContent&quot; style=&quot;display: none;&quot;&gt;
&lt;p&gt;
Pellentesque id tortor ipsum. Vivamus vitae ligula a massa
vestibulum scelerisque. Duis congue eros a quam tincidunt, eu
elementum sem eleifend. Proin suscipit, elit a sagittis laoreet,
libero lectus fermentum nisl, quis gravida elit massa id elit.
Fusce tristique, sem id iaculis consectetur, est nunc aliquam
massa, id consectetur lorem odio sit amet neque. Proin elementum
euismod varius. Nam laoreet odio eu elit dapibus vehicula. Integer
ultricies lacus vel tristique finibus.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;impacted-element&quot;&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum
purus vel mauris ultrices, ac tincidunt risus interdum. Aenean at
feugiat arcu. Nunc consectetur, nisi id venenatis suscipit, odio ipsum
tincidunt ipsum, eu bibendum turpis lorem vel orci. In eu mi semper,
varius quam nec, mattis odio. Vivamus venenatis odio nec libero
egestas tincidunt. Nulla et sagittis mi, ut congue odio. Nam blandit
mauris vitae lectus euismod, nec fermentum neque mattis.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function () {
$(&quot;#expandBtn&quot;).click(function () {
$(&quot;#expandedContent&quot;).slideToggle();
$(&quot;.first-column, .second-column&quot;).toggleClass(&quot;expanded&quot;);
});
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

答案1

得分: 1

需要将transition: all 0.3s ease;也添加到.second-column。请注意，您没有使用Bootstrap的collapse内置支持，而是使用了CSS（这是可以的）和jQuery的“propriety” slideToggle。

英文:

Need to add transition: all 0.3s ease; also to .second-column. Please note that you are not utilizing bootstrap's collapse built in support. Instead you're using css (which is ok) and jQuery "propriety" slideToggle

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Two Column Layout with Background Image and Expand&lt;/title&gt;
&lt;link
rel=&quot;stylesheet&quot;
href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&quot;
/&gt;
&lt;style&gt;
.first-column {
background-image: url(&quot;https://plus.unsplash.com/premium_photo-1688114984765-308599ec1e13?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=774&amp;q=80&quot;);
background-size: cover;
min-height: 300px;
transition-duration: 0.35s;
}
.second-column {
min-height: 300px;
transition-duration: 0.35s;
}
.expanded {
min-height: 500px;
}
.impacted-element {
overflow: hidden;
transition: max-height 0.3s ease;
}
.impacted-element.collapsed {
max-height: 200px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6 first-column&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col-md-6 second-column&quot;&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum
purus vel mauris ultrices, ac tincidunt risus interdum. Aenean at
feugiat arcu. Nunc consectetur, nisi id venenatis suscipit, odio
ipsum tincidunt ipsum, eu bibendum turpis lorem vel orci. In eu mi
semper, varius quam nec, mattis odio. Vivamus venenatis odio nec
libero egestas tincidunt. Nulla et sagittis mi, ut congue odio. Nam
blandit mauris vitae lectus euismod, nec fermentum neque mattis.
&lt;/p&gt;
&lt;button id=&quot;expandBtn&quot; class=&quot;btn btn-primary&quot;&gt;Expand&lt;/button&gt;
&lt;div id=&quot;expandedContent&quot; style=&quot;display: none;&quot;&gt;
&lt;p&gt;
Pellentesque id tortor ipsum. Vivamus vitae ligula a massa
vestibulum scelerisque. Duis congue eros a quam tincidunt, eu
elementum sem eleifend. Proin suscipit, elit a sagittis laoreet,
libero lectus fermentum nisl, quis gravida elit massa id elit.
Fusce tristique, sem id iaculis consectetur, est nunc aliquam
massa, id consectetur lorem odio sit amet neque. Proin elementum
euismod varius. Nam laoreet odio eu elit dapibus vehicula. Integer
ultricies lacus vel tristique finibus.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;impacted-element&quot;&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum
purus vel mauris ultrices, ac tincidunt risus interdum. Aenean at
feugiat arcu. Nunc consectetur, nisi id venenatis suscipit, odio ipsum
tincidunt ipsum, eu bibendum turpis lorem vel orci. In eu mi semper,
varius quam nec, mattis odio. Vivamus venenatis odio nec libero
egestas tincidunt. Nulla et sagittis mi, ut congue odio. Nam blandit
mauris vitae lectus euismod, nec fermentum neque mattis.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function () {
$(&quot;#expandBtn&quot;).click(function () {
$(&quot;#expandedContent&quot;).slideToggle();
$(&quot;.first-column, .second-column&quot;).toggleClass(&quot;expanded&quot;);
});
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何在Bootstrap 3中为受影响的元素实现平滑折叠效果

问题

答案1

如何在jQuery Datatable中查找数值

为什么我不能将图像居中？

有没有一种方法来为CSS类中的所有
元素设置样式？

The div element following my cursor (JS) disappears when I hover over a CSS keyframe animation – how can I fix this?

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论