How to use Bootstrap's class collapse with linear transition?

user_9889127 0
Viewed 32

I've been trying for a while to use boostrap collapse, but I would like a linear effect. I tried some versions of bootstrap and they have a very similar transition. I opted for the latest version of the site. I tried editing with CSS, but I was not successful.

I left the result that I got in the image below.

Thanks in advance!

<!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/bootstrap@5.2.0-beta1/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>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                    class="bi bi-link-45deg" viewBox="0 0 16 16">
                    <path
                      d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z">
                    </path>
                    <path
                      d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z">
                    </path>
                  </svg>
                </a>
              </td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td>
                <a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
            <tr>
              <td>Cat</td>
              <td>2a3m</td>
              <td>8kg</td>
              <td>4km</td>
              <td><a href="#">x </a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/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;
}

enter image description here

bootstrap-4 css html
1 Answers

In your case because of display:flex; and flex-direction: column; this two property making the jump of activity class once the collapse is opened. Actually your collapse is working fine, the activity class is the one which making sudden jump at the end. Here I have done some modifications on css which might help your case. Hope this is what you are expecting as well.

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

Change these part in your css alone will work. Hope this helps. If not please feel free to comment. Thanks

user_195155430
Related