For my school project, I've been experimenting with creating a functional phone using HTML. To achieve this, I incorporated a JavaScript class as shown below:
document.querySelector(".app-content").classList.add("app-on");
The class .app-on alters the width, height, and font size of my div element with a built-in transition effect. However, while the font size smoothly transitions as intended, the width and height abruptly appear.
I am particularly focusing on the .app-content class. It is the first occurrence of that class within the code.
Here is the complete reference code:
<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 styles are defined here:
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
/* Remaining CSS styling unchanged for brevity */
...
JavaScript functions included:
// JavaScript functionality remains the same
...