I've been attempting to implement Bootstrap collapse with a linear effect, but have been encountering challenges. After trying different versions of Bootstrap, I found that the transitions were quite similar. I decided to go with the latest version available on the site. Despite my efforts to edit using CSS, I did not achieve the desired result.
I have attached an image below showcasing the result I managed to obtain.
Thank you in advance for your assistance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ceee3e3f8fff8feedfcccb9a2bea2bca1eee9f8edbd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="style2.css">
<title>Collapse</title>
</head>
<body>
<div class="my-container">
<button
class="btn btn-primary"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
Button with data-bs-target
</button>
<div class="collapseExample" id="collapseExample">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores dolore quas nisi iste rerum, perferendis a
quod enim aspernatur quam facilis unde reprehenderit. Fugit animi repellendus blanditiis nam ducimus dolorum!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores dolore quas nisi iste rerum, perferendis a
quod enim aspernatur quam facilis unde reprehenderit. Fugit animi repellendus blanditiis nam ducimus dolorum!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores dolore quas nisi iste rerum, perferendis a
quod enim aspernatur quam facilis unde reprehenderit. Fugit animi repellendus blanditiis nam ducimus dolorum!
</p>
</div>
<div class="activies">
<h1>Activies</h1>
<div class="table-scroll">
<table class="table">
<thead>
<tr>
<th scope="col">Animal</th>
<th scope="col">Age</th>
<th scope="col">Weight</th>
<th scope="col">Distance</th>
<th scope="col">Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>2a3m</td>
<td>8kg</td>
<td>4km</td>
<td><a href="#">x </a></td>
</tr>
// more table rows...
</tbody>
</table>
</div>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2978c908c928fc0c7d6c393">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: lightblue;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.my-container {
background-color: white;
display: flex;
flex-direction: column;
height: 60vh;
width: 80vw;
}
#collapseExample {
background-color: red;
transition: all 1s linear !important;
}
.activies {
position: relative;
overflow: auto;
}