Using Bootstrap's collapse class with a smooth linear transition

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;
}

https://i.sstatic.net/zkbBH.gif

Answer №1

Due to the implementation of display:flex; and flex-direction: column;, the activity class is causing a abrupt shift when the collapse is opened in your scenario. The collapse functionality itself seems to be functioning correctly. I have made some adjustments to the CSS which may address this issue. Hopefully, this aligns with your desired outcome.

.my-container {
background-color: white;
/* display: flex; */
flex-direction: column;
height: 60vh;
width: 80vw;
overflow: auto;
}

button {
width: 100%;
}

#collapseExample {
background-color: red;
padding-bottom: 5px;
}

.activies {
position: relative;
margin-top: 5px;
overflow: auto;
transition: height 0.1s ease-out;
}

These specific changes to your CSS should resolve the issue. If not, please don't hesitate to provide feedback. Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pressing the submit button will not successfully forward the form

I've encountered an issue with my submit buttons - when I click on them, nothing happens. They were functioning properly before, but now they seem to be unresponsive. What could be causing this problem? <form id="contact" name="updateorder" acti ...

Incompatibility Issue with Ajax Request on iPad 1 (iOS 5.1.1)

Having an issue with reloading content on my iPad web app. The get request works fine in the browser, but I'm experiencing trouble in Safari on the iPad 1 (iOS 5.1.1). Any suggestions on how to fix this? <script type="text/javascript"> ...

Webpage Text Animation

This is the visual representation of my webpage: https://i.stack.imgur.com/tYq34.png I am seeking to implement a uniform animation effect for the text "Carlos Qiano" and "Lorem Ipsum", similar to the link below: https://i.stack.imgur.com/XVnBS.jpg Note: ...

How can I utilize Bootstrap to properly space items within a layout?

I'm having some difficulty creating spaces between the controls while using ml-auto. My goal is to have each control separated with spaces in between, specifically the "Core Status label" should be far apart from each other and aligned on a horizontal ...

What is preventing me from updating one dropdown list based on the selection made in another dropdown list?

I have a situation on a classic asp page where there are two dropdown lists: <select id="ddlState" name="ddlState" runat="server"> <option value="KY">Kentucky</option> <option value="IN" ...

How to align horizontal UL navigation utilizing CSS sprite background

After numerous attempts, I am struggling to center a 4 element horizontal list using a sprite image as the li background within the footer div. My CSS and HTML code is as follows: #footer-share-links { width:400px; text-align:center; margin:10 ...

What is the Best Way to Display an Image Field from a Django Model in Templates?

I'm having trouble displaying the uploaded image in the project template. This is the current state of my code: projects.html {% extends "base.html"%} {% block content%} <h1>{{ project.title }} HELLO</h1> <div class=" ...

Assigning information to a button within a cell from a dynamically generated row in a table

I've been diligently searching through numerous code samples but have yet to find a solution to my current dilemma: My HTML table is dynamically generated based on mustache values and follows this structure: <tbody> {{#Resul ...

Expanding the width of horizontal checkboxes to 100% using jQuery Mobile

I'm attempting to expand three horizontal checkboxes across the entire width of the page. <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-s ...

Stop jQuery Tab from Initiating Transition Effect on Current Tab

Currently, I am utilizing jQuery tabs that have a slide effect whenever you click on them. My query is: How can one prevent the slide effect from occurring on the active tab if it is clicked again? Below is the snippet of my jQUery code: $(document).read ...

Content that sticks to the footer

I've been utilizing the sticky footer solution found at: This is how the CSS appears: * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4 ...

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

As a .NET developer, I tuned in to the keynote for the Build Event in Anaheim, California and had some questions regarding the new support for creating Windows 8 applications using JavaScript, HTML5, and CSS3. They showcased several examples and mentioned ...

Limit the maximum column gap on the grid and stop it from expanding further

I'm currently facing an issue with some columns/rows on my website that are keeping content locked in the top left corner, reminiscent of early 00's web design. The site was originally designed for smaller screens like 1024x764, so when viewed on ...

How can you specifically target the initial row of a CSS grid using Tailwind?

Currently in my vue application, I have a loop set up like this: <div class="grid grid-cols-3 gap-14"> <article-card v-for="(article, index) in articles" :key="index" :content="article" /> </div> ...

Personalize your Native Base tab design

Recently, I've delved into the world of React Native and now find myself in need of assistance with customizing my tabs. Utilizing advanced tabs by Native Base, I aim to transform this: https://i.stack.imgur.com/xhNwP.png Into something more akin ...

Having difficulties adjusting the margin for a JSX element directly within the code

I'm struggling with giving a margin style inline to a JSX element. Here's the code snippet that I'm having trouble with: <Nunito20 style={{color: frenchGray, margin: 20 0 3 0;}}>Full Name</Nunito20> Unfortunately, this is throw ...

Is it possible to validate the fields on an HTML page that does not include a form tag using jQuery?

Below is a code snippet from my HTML page. Is it possible to validate the two specified text fields using jQuery without using any form tag in my HTML page? <div id="panel1"> <fieldset id="fieldset1"> <legend>Registration Details:</ ...

Creating CSS styles for fluid width divs with equal height and background images

Looking to create a layout with two side-by-side divs of equal width - one containing an image and the other dynamic text that can vary in height from 400px to 550px based on input. The goal is for the image to align flush at the top and bottom with the te ...

Issue with AngularJS URLs not functioning properly when using HTML5 mode

Utilizing the AngularJS SPA template in Visual Studio. In my app.js file, I have the following code: $stateProvider .state('touranalysis', { url: '/touranalysis', templateUrl: '/views/touranalysis/index', ...

Aligning a single component in the center vertically with the appbar positioned at the top of the screen using Material

As a beginner with material UI, I am facing challenges in centering a component both horizontally and vertically on my screen while including an AppBar for navigation at the top. While I have come across solutions like this example using a grid system, i ...