英文:
How to smooth collapse effect for collapse impacted element in Bootstrap 3
问题
我使用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&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&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)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&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>
<!-- end snippet -->
答案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
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!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&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80");
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;
}
</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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论