Afisare cu animatie continut adaugat cu JavaScript
Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
-
Marius
- Mesaje:60
Afisare cu animatie continut adaugat cu JavaScript
Ideea pe care vreau sa o fac e că la clic pe un buton, conținutul vechi e înlocuit cu nou conținut HTML adăugat cu javascript.
Vreau ca noul conținut să apară cu animație; 'fade' din dreapta (o transition CSS) de fiecare dată când fac clic pe buton.
Iată un fragment din ceea ce am în minte, dar nu știu cum să fac adaugarea cu animație (transition):
Cod: Selectaţi tot
<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>
MarPlo
Pentru a declanșa o tranziție CSS, modifica starea CSS după ce ai introdus codul HTML. Poți face asta schimbând o clasă (la container sau la un element inserat).
Apoi definesti o animație CSS și-o redai ori de câte ori faci clic pe buton.
Studiaza și testeaza următorul cod:
Cod: Selectaţi tot
<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:
Subiecte similare
- O mica problema de animatie CSS
HTML - XHTML - CSS
Primul mesaj
Noroc, MarPlo!
1. Am vizitat pe twitter un site de animatie, in care website-ul actual se numeste CSS-Challenges,com. In respectivul website, sunt...
Ultimul mesaj
1. Multumesc pentru raspuns.
2. Am inteles raspunsul tau: este un mic examen oferit voluntarilor online, pentru a le afla capacitatile de rezolvare...
- Animație cu pauză între fiecare rotație
HTML - XHTML - CSS
Primul mesaj
Am un Div pe care vreau să-l rotesc de la 0 la 90 grade, pauză 2s, apoi de la 90 la 180, iar pauză 2s .., tot asa până la 360 de grade.
Vreo idee...
Ultimul mesaj
Puteți face cu animații CSS transform: rotate() , ca în exemplu de mai jos.
Setezi timpul de rotatie la 12 secunde si incepi cele 4 rotatii...
- Produsul Dot a doua array in Javascript
JavaScript - jQuery - Ajax
Primul mesaj
Cum se poate implementa eficient o metoda dotProduct (pentru a obține produsul Dot din două array) fără a importa alte biblioteci Javascript?
De...
Ultimul mesaj
Iată o metodă.
Se foloseste funcția map() pentru a crea un nou array cu rezultate înmulțite ale fiecărui index, apoi se aplica funcția reduce()...
- Lungime obiect JSON in JavaScript
JavaScript - jQuery - Ajax
Primul mesaj
Am convertit un tabel din baze de date într-un obiect JSON.
Aceasta este, în esență, un array bidimensional, fiecare înregistrare fiind pe cate un...
Ultimul mesaj
Poti sa folosesti Object.keys pentru a obține lista de chei din obiect ca un array, apoi obții cu 'length' lungimea din el:...
- Adaugare apostrof la value in input cu JavaScript
JavaScript - jQuery - Ajax
Primul mesaj
Am un cod JavaScript care adaugă un câmp input pentru utilizator:
var user = O'Conner, John ;
b.innerHTML += <input type='hidden' value=' +...
Ultimul mesaj
Poți să înlocuiesti caracterul cu entitatea lui HTML.
Astfel, pentru apostrof (') poate fi ’ sau ‘
var user = O'Conner,...
- Problemă cu 'this' în function.call() în JavaScript
JavaScript - jQuery - Ajax
Primul mesaj
De ce function.call() se comportă diferit cu ' this ' cand nu e adaugat ca argument, în JavaScript?
Rezultatul cu 'this' în test.call() este același...
Ultimul mesaj
Functia call() necesita primul argument, care e pentru obiectul 'this', daca nu ai nevoie de el, adauga null .
test.call(null, ...args);
In...