Smooth resizing of the div, when adding/removing elements from it

For the umpteenth time, when creating my website, I am faced with a problem that I have not found a solution to on the Internet. Therefore, I again turn to this friendly forum for help.

Question:
I want to make it so that when adding or removing elements from <div class="panel">, it smoothly changes its height. The initial size of the div is known, but the size of the inserted image is unknown in advance.

Repl link: https://replit.com/@KAlexK/GetHelp?v=1

Code:
index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>get help</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="panel">
      <p>Panel</p>
      <button>Expand</button>
  </div>
  <script src="script.js"></script>
</body>

</html>

script.js

const panel = document.querySelector(".panel");

const randint = function(a, b) {
    return Math.round((Math.random() * (b - a)) + a);
}

const remove = function() {
    const img = document.querySelector("#image");
    img.remove();

    const btn = document.querySelector("button");
    btn.textContent = "Expand";
    btn.removeEventListener("click", remove);
    btn.addEventListener('click', expand);
}

const expand = function() {
    const img = document.createElement("img");
    img.src = "images/cat_"+randint(1, 3)+".png";
    img.id = "image";
    const btn = document.querySelector("button");
    btn.before(img);
    
    btn.textContent = "Remove";
    btn.removeEventListener("click", expand);
    btn.addEventListener('click', remove);
}

const btn = document.querySelector("button");
btn.addEventListener('click', expand);

style.css

html {
  height: 100%;
  width: 100%;
}

.panel {
    padding: 10px;
    border: 5px solid black;
    border-radius: 5px;
    transition: height 2s; /* does not work! */
}

p {
    margin-top: 0;
}

Speak up if you need more information.

Try adding height: fit-content; to the panel.

I added height: fit-content; to the style.css file, but the panel still resizes abruptly, not smoothly.

Does anyone have any ideas?

CSS rules should only be used for CSS events and such.
You would need a CSS animation, or more dynamic JS.

I didn’t quite understand what you said, since I’m new to web programming. Can you tell us about it more clearly for a beginner in this field?

1 Like

Essentially, the CSS you wrote would only apply to things that effect the height rule.
So, say if I were to :hover, and there’s a :hover rule for pannel.
It would smoother.

But since you’re instead adding new elements to the HTML DOM and not changing any rules, or sending any events that would trigger CSS; the CSS will not register this change.

I would recommend adding a class to the pannel for being closed or opened.
Maybe even you could use these?

2 Likes

Thank you for this information! But I still have one more question. How do I tell CSS animations to what size the div should be enlarged via JS?

You can get the sizes of elements using offsetWidth and offsetHeight or getBoundingClientRect(), Which will get the width & height of an element as a floating-point after CSS transformation.

If you mean by JS to get the values for CSS, then you may need to create a stylesheet in the head, and then insert the values manually.

You could use CSS-math and vars, but that’s a tad gross.

Basic Math is the only other answer I believe.

Thanks! You gave me an idea.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.