CSS transition works only with one element

Question

I have been trying to make a working phone for a school project. In HTML. Now, I added a class with JS with the following:

     document.querySelector(".app-content").classList.add("app-on");

Now, the class .app-on changes the width, height and font-size of my div. It has a transition built in. However, the width and height instantly pop up, while the font-size transitions just like i wanted.

.app-content is the class I am focusing on. The one I have added the animation to is the first one of that class to appear in the code

The full code for reference:

<html>
    <head>
        <meta charset="utf-8">
        <link href="style.css" rel="stylesheet" type="text/css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap" rel="stylesheet">
    </head>
    <body onload="startTime()">
        <!-- phone -->
        <div id="phone-border">
            <!-- screen -->

            <div id="phone-screen">
                <p id="time" style="font-weight: 600; font-size: 30px; float: left; color: white; padding: 10px;"></p>


                <div id="app-container">
                    <div class="app-wrapper" style="z-index: 10000;">
                        <img src="https://img.icons8.com/ios/452/coronavirus--v1.png" class="app-icon" style="left: 10%; top 60%" onclick="openMA()">
                        <div class="app top-app left" href="#">Malware-Arten</div>
                        <div class="app-content" style="position: absolute; left: 0; color: black;">asdasdfasdfasdfasdf</div>
                    </div>


                    <div class="app-wrapper">
                        <img src="https://www.freeiconspng.com/thumbs/shield-png/shield-png-1.png" class="app-icon" style="right: 15%; top 60%" onclick="openS()">
                        <div class="app top-app right" href="#">Schutz</div>
                        <div class="app-content"></div>
                    </div>


                    <div class="app-wrapper">
                        <img src="https://www.freeiconspng.com/thumbs/youtube-logo-png/hd-youtube-logo-png-transparent-background-20.png" class="app-icon" style="left: 10%; bottom: 17%" onclick="openYT()">
                        <div class="app bottom-app left" href="#">Youtube-Info</div>
                        <div class="app-content"></div>
                    </div>


                    <div class="app-wrapper">
                        <img src="https://www.designbust.com/download/1024/png/email_icon_transparent512.png" class="app-icon" style="right: 15%; bottom: 17%" onclick="openM()">
                        <div class="app bottom-app right" href="#">E-Mail</div>
                        <div class="app-content"></div>
                    </div>


                </div>


                <div class="blackscreen">


                </div>
            </div>
            <!-- /screen -->

            <!-- homebutton -->
            <div style="position: fixed;">
                <button class="pushable homebutton" id="hb">
                    <div class="front home-front">
                    </div>
                </button>
            </div>
            <!-- /homebutton -->

        </div>
        <!-- /phone -->
    </body>
    <script type="text/javascript" src="script.js"></script>
</html>

CSS here: I have marked the class with a comment.

@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }

body {
    background: #2c2b30;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 900;
    color: #f58f7c;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#phone-border{
    width: 360px;
    height: 630px;
    background: #4f4f51;
    margin: auto;
    padding-top: 60px;
    border-radius: 20px;
    border-bottom: 13px solid #303030;
    border-left: 13px solid #404040;
}


#phone-screen {
    width: 92%;
    height: 84%;
    background: #f58f7c;
    margin: auto;
    position: relative;
}



#app-container {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    height: 63%;
}

.app-icon {
    position: absolute;
    width: 100px; height: 100px;
    border-radius: 10px;
    border: 3px solid #000;
    -webkit-transition: all 0.1s ease-in;
    -moz-transition: all 0.1s ease-in;
    -o-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
}
.app-icon:hover {
    transform: translateY(-10px);
}

.app {
    color: #414b41;
    margin: auto;
}
.top-app {
    position: absolute;
    bottom: 60%;
}
.bottom-app {
    position: absolute;
    bottom: 10%;
}
.left {
    left: 6%;
}
.right {
    right: 21%;
}

.app-content {
    background: #404040;
    font-size: 0;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.app-on { /* -----------------------THIS-------------------------*/
    font-size: 15px;
    width: 100px;
    height: 100px;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}


.blackscreen {
    width: 100%;
    height: 100%;
    background: #000;
    margin: auto;
    position: absolute;
    z-index: 2;
    transition: all 0.5s;
}

.fade {
    background: transparent;
    transition: 1s;
}

.phone-on {
    box-shadow: 0px 0px 30px #f58f7c;
    transition: 1.2s;
}

.homebutton {
    width: 60px;
    height: 60px;
    background: #404040;
    border-radius: 100px;
    border: none;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: all 0.5s;
    position: fixed;
    left: 48%;
    top: 82%;
    margin-top: 20px;
}

.home-front {
    display: block;
    padding-top: 60px;
    border-radius: 100px;
    font-size: 1.25rem;
    background: #202020;
    color: white;
    transform: translateY(-6px);
    position: relative;
    left: 3px;
}

.homebutton:hover .front {
    transform: translateY(-8px);
    left: 4px;
    transition: 0.08s;
}
.homebutton:active .front {
    transform: translateY(-2px);
    left: 1px;
    transition: 0.08s;
}

JS here:

var on = false;
var homeButton = document.getElementById("hb");
homeButton.onclick = function(){
    if (on==false) {
        document.querySelector(".blackscreen").style.backgroundColor = "transparent";
        document.getElementById("phone-screen").classList.add('phone-on');
        on=true;
        setTimeout(function(){document.querySelector(".blackscreen").style.zIndex = "-10";},500);
    }
    else if(on==true) {
        console.log(123);
    }
}


function openMA() {
    console.log("Malware-Arten")
    var malwareArten = true;
    document.querySelector(".app-content").classList.add("app-on");
}
function openS() {
    console.log("Schutz")
    var schutz = true;
}

function openYT() {
    console.log("YT")
    var yt = true;
}

function openM() {
    console.log("Mail")
    var mail = true;
}


function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 1000);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

Please be sure to take the [tour] and read [ask]. It is preferred if your example can be made into a [mre], with an emphasis on minimal. That way answerers can focus on just the code that matters. It's also nice when they are in Stack Snippets (icon looks like `<>` in the editor toolbar); then they can easily copy that minimal code to an answer, modify the parts that need modifying, add an explanation, references, etc., and be on their way. — Heretic Monkey, Jun 10 '21 at 20:13

score 0 · Answer 1 · answered Jun 10 '21 at 20:08

0

document.querySelector only returns one element. You want to use document.querySelectorAll for multiple elements, along with a loop to do this.

document.querySelector(".app-content").forEach((ele) => ele.classList.add("app-on"));

answered Jun 10 '21 at 20:08

Samathingamajig

11,839
3
12
34

So, can I just copy-paste this exact code? – Ph1l Jun 10 '21 at 20:12
Yup, just replace that similar line inside of the `openMA` function with this one – Samathingamajig Jun 10 '21 at 20:13

score 0 · Answer 2 · answered Jun 10 '21 at 20:10

0

The default width and height of a div is auto and you cannot transition from an auto property to a pixel value. Try adding width: 0; height: 0; to the .app-content class.

answered Jun 10 '21 at 20:10

dantheman

3,189
2
10
18

CSS transition works only with one element

2 Answers2