css transform:scale property not working on modal image when changing display property

I’m a beginner in Javascript and I created a modal image project similar to this: I want to display and scale up the modal image when I click on the image and disappear and scale it down when click the button for the next time. but the problem is when I use the display property for hiding and displaying the modal image when the button is clicked, the transform: scale property doesn’t work and the modal image will be displayed and hide suddenly.
so I tried to comment document.getElementById("modalimg").style.display = "none"; of my js code and it worked better but not good enough.
I also tried to run this with the visibility property instead of the display property and it worked good but I want to know what the problem is.
I also tried to search for similar titles in overflows but these 1 and 2 questions didn’t help.

"use strict";
document.getElementById("container").onclick = modal;

function modal(buttFlag) {
    
    document.getElementById("modalimg").style.display = "inline";
    document.getElementById("modalbackground").style.display = "block";
    document.getElementById("butt").style.display = "block";
    document.getElementById("modalimg").style.transition = "all 1s";
    document.getElementById("modalimg").style.transform = "scale(7,4)";

    if (buttFlag == true) {
        document.getElementById("modalimg").style.transform = "scale(1,1)";
        document.getElementById("modalimg").style.display = "none";//I tried comment this line and it worked better but not good enough.
        
        document.getElementById("butt").style.display = "none";
        document.getElementById("modalbackground").style.display = "none";
        buttFlag = false;
        // console.log("Im in");
    }
}

#container{
    width: 20%; height: 50%;
    margin: 70%; margin-top: 12%;
    position: absolute;
}
#container img{
    width: 100%; height: 100%;
    object-fit: cover;
}
#textContainer{
    position: absolute;
    width: 50%; height: 100%;
    background-color: hsla(0, 0%, 100%, 0.5);
    padding: 10px;
    box-sizing: border-box;
    text-justify:newspaper;
}
#textContainer p{
    font-size: 2em; 
    word-break: break-all;
    
}
#modalbackground{
    position: absolute;
    width: 100%;height: 100%;
    background-color: black;
    opacity: 0.7;
    display: none;
    z-index: +1;
}

#modalimg{
    width: 100px; height: 100px;
    position: absolute;
    top:45%; left: 45%;
    z-index: +1;
    display: none;
}

button{
    font-size: 2em;
    background-color: transparent;
    border: none;
    position: absolute;
    left: 85%; top: 5%; 
    color: white;
    z-index: +1;
    display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body id="bd">

  <div id="modalbackground"> </div>

  <div id="container">
    <img src="https://st4.depositphotos.com/11639344/22517/i/600/depositphotos_225179058-stock-photo-asian-rainforest-jungle-august.jpg" alt="jungle">
  </div>


  <button onclick="modal(true)" id="butt">            &#9746; </button>
  
  <img id="modalimg" src="https://st4.depositphotos.com/11639344/22517/i/600/depositphotos_225179058-stock-photo-asian-rainforest-jungle-august.jpg"                 alt="jungle">

</body>

</html>