<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<style>
.testbox {
height: auto;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: transform 1s ease-out;
}
.form {
min-height: 100%;
max-width: 200px;
padding: 20px;
padding-bottom: 0;
border-radius: 6px;
background: #00aeffd0;
transition: transform 1s ease-out;
}
</style>
</head>
<body>
<div class="testbox">
<div class="form" style="width: 100%;">
<button onclick="expand()">
expand
</button>
<p id="txt">
</p>
</div>
</div>
</div>
<script>
function expand() {
let appender = $('#txt');
appender.html("LONGERTEXT<br>HIGHERTEXT<br>more error messages");
}
</script>
</body>
</html>
I’m making a upload website, and there are tables in the form div and the button is used to submit. If the user’s input is invalid, errors will show under the button.
the entire page was animated by myself smoothly, except the part where the error message pops under the button
In my opinion, the div should slowly become higher, and the new text shows as the div transform.
But after clicking the button, instantly changes its size, and there is no transition animations.
i tried settimeout in js and requestAnimationFrame, but none of them worked
New contributor
QuitSense is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.