| Autor | Zpráva | ||
|---|---|---|---|
| RastyAmateur Profil |
Zdravím,
mám formulář a v něm nějaké inputy, které jsem si sám nějak upravil. Mají i nějaký transition kvůli :hover efektu. Jenže když načtu stránku, některé vlastnosti se pomalu změní vrámci toho transitionu (mělo by jít o margin a padding). Když transition odstraním, neděje se to.
Pokusil jsem se to nahrát na video. Moc to není vidět, protože to má asi tak 10FPS, ale alespoň budete mít větší šanci to pochopit... vimeo.com/274234671 Záhadou mi je, že když jsem si vytvořil samostatný HTML soubor přesně s daným obsahem, nedělo se to! Nahrál bych to někam na server, ale je to psané v Djangu, ve kterém se snažím naučit a zatím nevím, jak na to... Může to být třeba tím, že mám CSSka rozdělená do více souborů? Ta část kódu, která by měla být ta hlavní: <form action="/authentication/login/" method="POST">
<input type="text" name="username" placeholder="username" autocomplete="off" required>
<input type="password" name="password" placeholder="password" required>
<div></div>
<input type="submit" value="Přihlásit se">
</form>form input[type="text"],
form input[type="password"] {
display: block;
width: 250px;
margin: 10px auto;
height: 40px;
line-height: 40px;
border: none;
font-size: 0.7em;
padding: 0 5px;
box-sizing: border-box;
transition: 300ms;
}
form input[type="submit"] {
display: block;
width: 250px;
margin: 10px auto;
height: 30px;
line-height: 30px;
border: none;
opacity: .5;
cursor: pointer;
} |
||
| RastyAmateur Profil |
#2 · Zasláno: 9. 6. 2018, 17:49:35
Tak co jsem tak hledal, asi to bude problém v prohlížeči, ale moc tomu nevěřím. v Safari se mi to neděje
Je ale divné, že se to děje pouze u něčeho. Někdo nějaký nápad/podobný problém? |
||
| Tomáš123 Profil |
#3 · Zasláno: 10. 6. 2018, 10:40:24
RastyAmateur:
Z ukážky to na mňa nepôsobí ako chybný transition, skôr bežné načítavanie. Transition ale môžeš nastaviť iba pre konkrétne vlastnosti, ktoré chceš animovať: transition: background .3s;.
|
||
| RastyAmateur Profil |
#4 · Zasláno: 10. 6. 2018, 12:49:20
Tomáš123:
Na jiných stránkách se mi to ovšem nestává. O možnosti nastavení transition jen pro něco vím, ovšem nechce se mi tam “nechat chybu a zaplácnout to něčím jiným” |
||
| Tomášeek Profil |
#5 · Zasláno: 11. 6. 2018, 08:49:57
RastyAmateur:
Ale vždyť to je přeci absolutně normální chování, že se animují objekty i při načtení stránky, pokud mají transiotion zadané... Pokud chceš animovat jen na hover, nastav animaci pro :hover, pak ale bude probíhat jen při hoveru, nikoliv při unhoveru. Nebo můžeš nastavit animující třídu až po načtení pomocí JS, ta při načtení tak neproběhne (resp. proběhne z výšky 40px na 40px, což nebude viditelné).
|
||
| RastyAmateur Profil |
#6 · Zasláno: 11. 6. 2018, 16:59:06
Tomášeek:
Aha, no nikdy jsem se s tím moc nesetkal. Chtěl jsem to vyřešit nějak jinak, než pomocí JS. Ale tak co se dá dělat. Děkuji :) |
||
| Tomášeek Profil |
#7 · Zasláno: 11. 6. 2018, 17:09:54
RastyAmateur:
„Aha, no nikdy jsem se s tím moc nesetkal.“ Tak ono se stačí podívat na jakoukoliv WP šablonu, které tu animaci mají prakticky všechny. Na všech se animuje hned od loadu. Pokud by bylo standardní chování animovat vždy kromě loadu (proč takto blbě, proboha?), tak by musel v CSS být nějaký přepínač, který by řekl "animuj hned". Ten není. Je to výchozí chování, přepínač "animuj až později" také není. |
||
| Keeehi Profil |
#8 · Zasláno: 11. 6. 2018, 17:16:18
RastyAmateur:
„Může to být třeba tím, že mám CSSka rozdělená do více souborů?“ Mohlo by být. Obzvlášť pokud jsou linkované v různých částech stránky nebo dynamicky. |
||
| RastyAmateur Profil |
Tomášeek:
Já nevím, opravdu všude jinde jsou také upravené inputy a načítají se ihned Keeehi: No aktuálně to mám řešené tak, že když je zobrazený formulář pro login, načítá se CSS soubor s CSSkama jen pro login. Takhle má vlastně každá stránka vlastní. Ovšem všechny jsou v hlavičce a za sebou. Nedalo mi to a koukl se už jen na seznam. Přihlašovací tlačítko. Má transition: background-color .1s;, ale při loadu stránky se nemění, už je prostě červený...
|
||
| RastyAmateur Profil |
A pokračoval jsem dál, a děje se to třeba i s odkazama (z výchozí modré barvy se změní na danou barvu). Fakt nemám nejmenší tušení, kde se to bere. Zkusím to někam nahrát a hodit to sem.
|
||
| RastyAmateur Profil |
Nahrál jsem to na nějaký free hosting a dělá mi to i tam. Přibližně v 50% případů (inputy. Odkazy najednou běží v pohodě. Vážně si začínám myslet, že jsem blázen)
Ukázka |
||
| Keeehi Profil |
#12 · Zasláno: 12. 6. 2018, 02:25:41
RastyAmateur:
Jeden rozdíl jsem našel. Stává se mi to jen když povolím kešování stránky. Toto je záznam kdy se animace neprojeví 
A toto je záznam, kdy se animace projeví 
Jak je vidět, css soubor authentication.css se v problémovém případě vyskytuje před style.css. Což je zřejmě to, co způsobuje problémy. Existují nějaká pravidla která já přesně neznám (a nejspíše specifická pro různé prohlížeče a jejich verze) která definují na jaké zdroje se má čekat a v jakém pořadí se mají vyhodnocovat. Závisí to nejspíše na pozici v kódu stránky, atributech elementu a asi i dalších faktorech. Možná že i na tom, zda je zdroj z keše nebo ne i když tam bych to neočekával. Tam si spíš myslím že roli hrál timing který šťastnou souhrou získá style.css dříve. Dle mých znalostí v kódu nevidím jediný důvod, proč by prohlížeč měl css soubory vyhodnocovat v opačném pořadí (nebo náhodně, nezávisle na sobě) než jak je definováno v kódu. Jediné co mě napadá je to, že ty dva elementy link jsou rozdělené elementem script. Což může dělat problémy, jelikož javascript může v té chvíli teoreticky zásadně změnit obsah dokumentu. Takže elementy link by pro prohlížeč mohly být v nějakých dvou oddělených blocích a vyhodnocovat se paralelně. Ale to je jen náhodný tip který mi prolétl hlavou. Žádné důkazy pro to nemám. Ale zkusil bych dát linky k sobě. Vyzkoušel bych to se script před nimi a za nimi. A otestoval, zda nastala nějaká změna. Pokud se ti nechce nic testovat, pak by mělo být řešením sloučit style.css a authentication.css dohromady. Tím jasně zajistíš, v jakém pořadí se budou vyhodnocovat. |
||
| RastyAmateur Profil |
#13 · Zasláno: 12. 6. 2018, 08:53:18
Keeehi:
Zkusil jsem obojí. Sloučit CSS soubory i dát ty <link>y za sebe. Pomohlo obojí. Nechápu to. Jsem si pevně jistý, že jsem opravdu obojí zkoušel i před tím, než jsem přišel s tímto dotazem na diskusi. Nebo jestli jsem v té době přehlížel nějakou chybu, kterou si teď neuvědomuji? Opravdu nevím.
Každopádně děkuji moc za pomoc. Doufám, že už to pojede :-) |
||
|
Časová prodleva: 6 let
|
|||
0