CSS3 div méretváltoztatás animálással
Szeretném a weblapomon egy div méretét megváltoztatni animálással, amikor betöltődik az oldal.
Ez így működik, ha csak a szélességet adom meg, de ha emellett megadom a height-et is, akkor nem csinálja egyszerre mind a kettőt.
Ekkor csak a magasságát változtatja, a szélesség egyből arra ugrik és az nem animálódik. Hogy lehet, hogy mind a kettőt animálja?
■ div_nev.style.setProperty("-webkit-transition", "width 2s linear");
var nagyit = function(){
div_nev.style.setProperty("width", magassag+"px");
}
nagyit();
var nagyit = function(){
div_nev.style.setProperty("width", magassag+"px");
}
nagyit();
Ez így működik, ha csak a szélességet adom meg, de ha emellett megadom a height-et is, akkor nem csinálja egyszerre mind a kettőt.
div_nev.style.setProperty("-webkit-transition", "width 2s linear");
div_nev.style.setProperty("-webkit-transition", "height 2s linear");
var nagyit = function(){
div_nev.style.setProperty("width", magassag+"px");
div_nev.style.setProperty("height", szelesseg+"px");
}
nagyit();
div_nev.style.setProperty("-webkit-transition", "height 2s linear");
var nagyit = function(){
div_nev.style.setProperty("width", magassag+"px");
div_nev.style.setProperty("height", szelesseg+"px");
}
nagyit();
Ekkor csak a magasságát változtatja, a szélesség egyből arra ugrik és az nem animálódik. Hogy lehet, hogy mind a kettőt animálja?
Jól nézd meg a kódot.
Egy sorba?
Igen.
Átírtam
Ha már CSS
style-lal körülményeskedni (plusz így lehet, hogy hamarabb észrevennéd, mi a hiba a kódoddal; de segít a dokumentáció a megfelelő szintaxis kiválasztásában).(Amennyiben egy meghatározott böngészőre és verzióra fejlesztesz, vagy csak a példa kedvéért használtad csak a -webkit prefixes változatot (bár ez esetben a prefix nélküli szerencsésebb lett volna), tárgytalan a következő bekezdés, de az utókornak még akkor is jól jöhet.)
Remélem csak véletlenül írtad a -webkit prefixes változatot, és a tényleges kódban szerepel a prefix nélküli változat is, ugyanis a legtöbb aktuális böngészőben már nincs szükség prefix-re, illetve más gyártók böngészői meg sem értik feltétlenül a -webkit-es változatot, így kimaradnak az effektek élvezetéből.
Azért nem jó, hogy CSS-ben
Responsive Web Design
[szerk]
De ha az új szélesség beállítását nem is szeretnéd CSS-sel megoldani, az alap
transitiontulajdonságokat még mindig megadhatod CSS-ben, és már akkor is egy fokkal tisztább a JS-ed, lévén csak a szélességet és a magasságot manipulálod belőle.[/szerk]
Több helyen kerestem a
Sikerült