Show with animation the content added with JavaScript
Topics related to client-side programming language.
Post questions and answers about JavaScript, Ajax, or jQuery codes and scripts.
-
Marius
- Posts: 106
Show with animation the content added with JavaScript
The idea is that when i click on a button, old content gets replaced by new HTML content added with javascript.
I want that new content to appear with animation; to fade in from the right (a css transition) every time i click the button.
Here is a snippet of what i have in mind, but I don't know how to add with animation (the transition):
Code: Select all
<style>
#pag_cnt p {
font-size: 40px;
}
</style>
<div id='pag_cnt'>
<p>Hello world!</p>
</div>
<button onclick='add_anim()'>Click here</button>
<script>
let new_cnt = `<p>It's me again!</p>`;
function add_anim() {
let pag_cnt = document.getElementById('pag_cnt');
pag_cnt.innerHTML = new_cnt;
}
</script>
Admin
To trigger a CSS transition, change the CSS state after you inserted the HTML. You can do this by changing a class (on the container or an inserted element).
Then make a CSS animation and play that whenever you click the button.
Study and test the following code:
Code: Select all
<style>
#pag_cnt p {
font-size: 40px;
}
.add_anim {
animation: fadeIn 500ms ease-out backwards;
}
@keyframes fadeIn {
from {
transform: translateX(280px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
</style>
<div id='pag_cnt'>
<p>Hello world!</p>
</div>
<button onclick='add_anim()'>Click here</button>
<script>
let new_cnt = `<p>It's me again!</p>`;
let pag_cnt = document.getElementById('pag_cnt');
function add_anim() {
pag_cnt.innerHTML = new_cnt;
pag_cnt.classList.add('add_anim');
setTimeout(function() {
pag_cnt.classList.remove('add_anim');
}, 500); // 500 is the same time as the CSS animation
}
</script>
- Demo:
Similar Topics
-
Adding HTML content from javascript /iQuery into a form
JavaScript - jQuery - Ajax
First post
For day`s i`m busy to improve my comment system
& no I`m ready to place a url extractor but I hope
you can support me by this-one....
I want...
Last post
It depends where you want to add the html content from javascript in the form, on the beginning, or at the end after other elements.
Se the: 2....
-
Pause animation between each rotation
HTML - CSS
First post
I have a Div that I want to rotate from 0 to 90 stop 2s, then continue from 90 to 180 then stop 2s .., to the 360 degrees.
Any idea of how can I add...
Last post
You can do that with CSS animations transform: rotate() , like in the example below.
Set the rotation time to 12 seconds and start the 4 'transform'...
-
Reverse the characters added in text field
JavaScript - jQuery - Ajax
First post
I have the following html and JavaScript code. An input text box and a button.
<input type='text' id='backwards-input'>
<button...
Last post
Try use and study the following code:
<input type='text' id='backwards-input'>
<button id='backwards-button'>Button</button>...
-
Adding content from a Div into an input text field
JavaScript - jQuery - Ajax
First post
I still don`t understand how I can get the results from a div into a text input form field ?
<div id= div2 > Content </div>
I...
Last post
Thanks Chief for all your support....
My URL-extractor is working
in the comment-system
-
Register and show Time Spent from ip on website
JavaScript - jQuery - Ajax
First post
Dear admin, I`m searching for round 10 hours for a solution to track & store spending-time from a visitor on the website.
I found a Ajax...
Last post
Maybe it is not working with onunload to execute ajax request when the user closes the page.
Try the following code.
- JavaScript:...