Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Transition pada accordion
Saya sedang belajar membuat accordion menggunakan pure html dan css. Cara membuat transition agar target terbuka dengan smooth gimana ya? contoh, transtion: (saya gak tau ini diisi element apa).
Thanks!
7 Jawaban:
Jawaban Terpilih
Halo.
Trantition merupakan shorthand dari beberapa properti transition lainnya, secara ringkas, transition bisa diisi seperti ini:
transition: property duration timing-function delay|initial|inherit;
Contoh penerapannya:
.iniselector {
height: 100px;
transition: height .25s linear;
}
isi pertama adalah property, transisi ini akan diterapkan pada properti apa? pada contoh diatas, saya terapkan pada property height
isi kedua adalah durasi, berapa lama transisi ini akan berlangsung? pada contoh diatas, saya isi .25second atau 1/4 detik
isi ketiga adalah timing-function, merupakan kecepatan transisi dalam bentuk kurva, isinya bisa bermacam-macam, tergantung kebutuhannya. Pada contoh diatas, saya mengisinya dengan linier:
jadi kalau saya buat satu lagi rule css seperti ini
.iniselector:hover {
height: 200px;
}
Maka ketika iniselector saya hover, dia akan bertransisi pada tingginya saja dari 100px menjadi 200px, dengan kecepatan 0.25detik secara linier.
Selengkapnya: https://www.w3schools.com/cssref/css3_pr_transition.asp
Maaf, tapi apakah cara ini bisa untuk .selector:target{}?
soalnya saya menggunakan cara link (a href) untuk membuat accordion.
<head>
<title> CSS3 </title>
<link rel="icon" href="CSS3_logo.png" type="image/png" sizes="16x16">
<meta charset="UTF-8">
<style>
body{
margin: 15% 15%;
font-family: sans-serif;
}
a{
display: block;
background-color: rgb(255, 84, 0);
text-decoration: none;
color: black;
font-size: 26px;
}
.isi{
padding: 0;
height: 0;
overflow: hidden;
text-align: justify;
/* border: 1px solid grey; */
background-color: rgb(215, 215, 215);
transition: height 2s linier;
}
.isi:target{
padding: 10px 10px;
height: auto;
}
.wrapper{
margin: 30px;
}
</style>
</head>
<body>
<h1> Accordion </h1>
<div class="wrapper">
<a href="#menu1"> First </a>
<div id="menu1" class="isi">
Building mr concerns servants in he outlived am breeding. He so lain good miss when sell some at if. Told hand so an rich gave next. How doubt yet again see son smart. While mirth large of on front. Ye he greater related adapted proceed entered an. Through it examine express promise no. Past add size game cold girl off how old.
</div>
</div>
<div class="wrapper">
<a href="#menu2"> Second </a>
<div id="menu2" class="isi">
He do subjects prepared bachelor juvenile ye oh. He feelings removing informed he as ignorant we prepared. Evening do forming observe spirits is in. Country hearted be of justice sending. On so they as with room cold ye. Be call four my went mean. Celebrated if remarkably especially an. Going eat set she books found met aware.
</div>
</div>
<div class="wrapper">
<a href="#menu3"> Third </a>
<div id="menu3" class="isi">
Two before narrow not relied how except moment myself. Dejection assurance mrs led certainly. So gate at no only none open. Betrayed at properly it of graceful on. Dinner abroad am depart ye turned hearts as me wished. Therefore allowance too perfectly gentleman supposing man his now. Families goodness all eat out bed steepest servants. Explained the incommode sir improving northward immediate eat. Man denoting received you sex possible you. Shew park own loud son door less yet.
</div>
</div>
</body>
Kira-kira salah pengerjaan saya dimana ya? Terimakasih sudah membantu..
Ada dua kesalahan.
Pertama, harusnya "linear" bukan "linier".
transition: height 2s linier;
Kedua, kalo transition ngga bisa kalau target height-nya auto. Makanya banyak accordion yang pake javascript.
.isi:target{
padding: 10px 10px;
height: auto; /* ini ngga akan work. coba fixed height misal "200px" */
}
Solusi, coba ganti pake property max-height.
.isi{
padding: 0;
max-height: 0;
overflow: hidden;
text-align: justify;
/* border: 1px solid grey; */
background-color: rgb(215, 215, 215);
transition: max-height 2s linear;
}
.isi:target{
padding: 10px 10px;
max-height: 300px;
}
Halo.
Betul mas, disitu ada salah harus linear, sudah saya update. Transition untuk height harus fixed value, tidak bisa auto.
Cek fiddle ini untuk demonya https://jsfiddle.net/ho5yx6h3/
Terima kasih! sangat membantu.
tapi property max-height kenapa gak bisa dipake ya? yg keluar cuma paddingnya aja.