Sign In
Create Account
Back to top |
Chirurgia cranio-cerebrală minim invazivă
Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne. Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale. www.neurohope.ro |
Animatie on click in css, fara JS/jQuery
Last Updated: Apr 04 2023 05:46, Started by
f0rtat3u
, Apr 02 2023 16:35
·
0
0
#1
Posted 02 April 2023 - 16:35
|
Salut,
Imi bat capul de ceva timp cu o animatie in css. Aici este codul : http://codepen.io/f0rtat3u/pen/LYJwPEQ Iar asta este efectul: http://imgur.com/a/xKLazSk Am incercat sa evit JS, si sa fac cumva ca efectul sa fie on click, asa ca am pus toata sectiunea intr-un input. Daca aveti vreo idee, sa-mi aratati direct pe acest cod. Mersi 
|
#2
Posted 02 April 2023 - 21:03
|
Practic, tu vrei o tranziție, dar tu te joci cu 2 elemente: când unul e invizibil, celălalt e vizibil și viceversa. Nu știu să existe tranziții la display. Cred că trebuie altă metodă. Trebuie să-i zici elementului inițial (availability-disabled) să aibă tranziție pe width și gata, să nu-l faci invizibil.
Edited by horny_hornet, 02 April 2023 - 21:17. |
#3
Posted 02 April 2023 - 22:15
|
Cum a zis colegul mai sus, nu poți pune tranziție pe display. Încearcă cu opacity 0 și width 0, iar la checked pui opacity 1 și width 100%.
Cât despre partea asta: border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; Ai putea sa scrii simplificat: border-radius: 0 10px; |
#4
Posted 03 April 2023 - 12:46
|
horny_hornet, on 02 aprilie 2023 - 21:03, said:
Practic, tu vrei o tranziție, dar tu te joci cu 2 elemente: când unul e invizibil, celălalt e vizibil și viceversa. Nu știu să existe tranziții la display. Cred că trebuie altă metodă. Trebuie să-i zici elementului inițial (availability-disabled) să aibă tranziție pe width și gata, să nu-l faci invizibil. https://codepen.io/f...t3u/pen/ZEMgGXK Pe langa asta, am nevoie ca in faza initiala, in cercul verde sa apara iconita "checked", iar la expand sa apara si textul. Tot in faza initiala, partea de "in-calendar" sa fie hidden si abia la click sa apara si sa faca acelasi efect (vezi video).. 
Edited by f0rtat3u, 03 April 2023 - 12:50. |
#5
Posted 03 April 2023 - 12:58
|
f0rtat3u, on 03 aprilie 2023 - 12:46, said:
Am modificat codul, dar tot nu prea imi dau seama unde sa pun tranzitiile: https://codepen.io/f...t3u/pen/ZEMgGXK Pe langa asta, am nevoie ca in faza initiala, in cercul verde sa apara iconita "checked", iar la expand sa apara si textul. Tot in faza initiala, partea de "in-calendar" sa fie hidden si abia la click sa apara si sa faca acelasi efect (vezi video).. Edited by horny_hornet, 03 April 2023 - 12:59. |
#6
Posted 03 April 2023 - 13:07
|
horny_hornet, on 03 aprilie 2023 - 12:58, said:
Eu i-aș băga js cu un textContent de care vrei tu. Nu știu să poți modifica conținutul elementelor cu css. horny_hornet, on 03 aprilie 2023 - 12:58, said:
Eu i-aș băga js cu un textContent de care vrei tu. Nu știu să poți modifica conținutul elementelor cu css. |
#7
Posted 03 April 2023 - 15:05
|
f0rtat3u, on 03 aprilie 2023 - 13:07, said:
Ma mai gandeam sa pun font-size 0 si opacity 0 pe text, si sa ramana vizibil doar acel "check". Iar cand se face tranzitia, sa revina la size-ul si opacitatea initiala 
desktop.png 86.46K
4 downloadsTotuși, din animație, îmi dă senzația că sunt 3 elemente acolo, din care unul nu se vede la început, al treilea. Când dai click, primele 2 elemente cresc în lățime și apare și al treilea care se are același efect. Aș face treaba asta, dar codul e cam stufos, e mult css. Să ai grijă că lipsește un </div>, folosește vscode cu prettier, că îți semnalează treaba asta. |
#8
Posted 04 April 2023 - 05:46
|
Poți modifica și conținutul text din CSS cu ajutorul pseudo elementelor. Mai exact, te folosești de ::before sau ::after. Exemplu:
.checkbox::after {
content: "✓";
}
.checkbox:checked::after {
content: "ce vrei sa apară în element când checkboxul este bifat";
}
|
Anunturi
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
-
- Change Theme
- English
- Mark Community Read
- Termene & conditii
- Confidentialitate
- Consimtamant
- Cookies
- Help
© 2001-2024 Softpedia. All rights reserved. Softpedia® and the Softpedia logo are registered trademarks of SoftNews Net SRL.
Ora implicita a Forumului Softpedia este ora standard a Romaniei (GMT+2). Mai multe informatii →
⚠ Postarile afisate pe Forumul Softpedia reprezinta o opinie subiectiva a membrilor care le-au publicat si nu a SoftNews Net SRL.