Y├╝ksekli─či nas─▒l de─či┼čtirebilirim: 0; y├╝kseklik: otomatik; CSS kullan─▒yor musunuz?


Al─▒nan cevaba git


<ul> CSS ge├ži┼člerini kullanarak a┼ča─č─▒ kayd─▒rmaya ├žal─▒┼č─▒yorum .

Den <ul> ba┼člar height: 0; . Vurgulu havada, y├╝kseklik ayarlan─▒r height:auto; . Ancak bu ge├ži┼čin de─čil , basit├že g├Âr├╝nmesine neden oluyor.

Ben onu yaparsan─▒z height: 40px; i├žin height: auto; , o zaman kadar kayar height: 0; , ve sonra aniden do─čru y├╝ksekli─če atlamak.

Bunu JavaScript kullanmadan ba┼čka nas─▒l yapabilirim?

 #child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
} 
 The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div> 


1945









Cevap say─▒s─▒n─▒ say: 30






Ge├ži┼čte kullan─▒n max-height ve kullan─▒lmamal─▒d─▒r height . Ve max-height kutunun alaca─č─▒dan daha b├╝y├╝k bir ┼čeye de─čer ver.

Burada ba┼čka bir cevapta Chris Jordan taraf─▒ndan sa─članan JSFiddle g├Âsterisine bak─▒n .https://stackoverflow.com/a/20226830/18706

 #menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
} 
 <div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div> 


2557


2011-11-30





Bunun yerine scaleY kullanmal─▒s─▒n─▒z.

HTML:

 <p>Here (scaleY(1))</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
 

CSS:

 ul {
    background-color: #eee;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.26s ease;
}

p:hover ~ ul {
    transform: scaleY(1);
}
 

Jsfiddle, http://jsfiddle.net/dotnetCarpenter/PhyQc/9/ adresinde yukar─▒daki kodun sat─▒c─▒s─▒n─▒ ├Ânceden belirttim ve http://jsfiddle.net/dotnetCarpenter/ 7cnfc / 206 / .


285







─░lgili y├╝ksekliklerden biri oldu─ču zaman, ┼ču anda y├╝ksekli─če animasyon uygulayamazs─▒n─▒z auto , iki a├ž─▒k y├╝kseklik ayarlaman─▒z gerekir.


189







Hep kullanm─▒┼č oldu─čunuz ├ž├Âzeltisi daha sonra k├╝├ž├╝ltmek, ilk solma out oldu font-size , padding ve margin de─čerleri. Silme ile ayn─▒ g├Âr├╝nm├╝yor, ancak statik height veya i┼člevsiz ├žal─▒┼č─▒yor max-height .

├çal─▒┼čma ├Ârne─či:

 /* final display */
#menu #list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
#menu:not(:hover) #list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
#menu:hover #list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
} 
 <div id="menu">
    <b>hover me</b>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

<p>Another paragraph...</p> 


114







Bunun, bu soruya otuzbirinci cevap oldu─čunu biliyorum, ama bence buna de─čer, i┼čte b├Âyle. Bu, a┼ča─č─▒daki ├Âzelliklere sahip bir yaln─▒zca CSS ├ž├Âz├╝m├╝d├╝r:

  • Ba┼člang─▒├žta hi├žbir gecikme yoktur ve ge├ži┼č erken durmaz. Her iki y├Ânde de (geni┼čleyen ve daraltma), CSSÔÇÖnizde 300msÔÇÖlik bir ge├ži┼č s├╝resi belirtirseniz, ge├ži┼č 300msÔÇÖdir.
  • Ger├žek y├╝ksekli─če ge├ži┼č yap─▒yor (aksine transform: scaleY(0) ), bu nedenle daralt─▒labilir ├Â─čeden sonra i├žerik varsa do─čru olan─▒ yapar.
  • (Di─čer ├ž├Âz├╝mlere oldu─ču gibi) Oradayken olan sihirli say─▒lar ise (gibi "Kutun hi├ž olacak daha y├╝ksek bir uzunlu─ča almak"), bu ├Âld├╝r├╝c├╝ de─čil yanl─▒┼č oldu─čunu belirten yukar─▒ varsay─▒m biter. Bu durumda, ge├ži┼č ┼ča┼č─▒rt─▒c─▒ g├Âr├╝nmeyebilir, ancak ge├ži┼č ├Âncesinde ve sonras─▒nda, bu bir sorun de─čildir: geni┼čletilmi┼č ( height: auto ) durumda, i├žeri─čin tamam─▒ her zaman do─čru y├╝ksekli─če sahiptir (├Ârne─čin, max-height bunun bir sonu├ž ├ž─▒karmas─▒ durumunda ├žok d├╝┼č├╝k). Ve ├ž├Âkm├╝┼č halde, y├╝kseklik gerekti─či gibi s─▒f─▒rd─▒r.

g├Âsteri

─░┼čte hepsi ayn─▒ CSS kullanan, t├╝m├╝ farkl─▒ y├╝kseklikte ├╝├ž daralt─▒labilir ├Â─čeli bir demo. "Snippet'i ├žal─▒┼čt─▒r" ─▒ t─▒klad─▒ktan sonra "tam sayfa" y─▒ t─▒klamak isteyebilirsiniz. JavaScript'in yaln─▒zca collapsed CSS s─▒n─▒f─▒n─▒ de─či┼čtirdi─čini, ├Âl├ž├╝m yap─▒ld─▒─č─▒n─▒ unutmay─▒n . (Bu demoyu, herhangi bir JavaScript kullanmadan veya onay kutusunu kullanarak yapabilirsiniz :target .) Ayr─▒ca, CSSÔÇÖnin ge├ži┼č i┼čleminden sorumlu olan b├Âl├╝m├╝n├╝n olduk├ža k─▒sa oldu─čunu ve HTMLÔÇÖnin yaln─▒zca tek bir ek sarmalay─▒c─▒ ├Â─česi gerektirdi─čini unutmay─▒n.

 $(function () {
  $(".toggler").click(function () {
    $(this).next().toggleClass("collapsed");
    $(this).toggleClass("toggled"); // this just rotates the expander arrow
  });
}); 
 .collapsible-wrapper {
  display: flex;
  overflow: hidden;
}
.collapsible-wrapper:after {
  content: '';
  height: 50px;
  transition: height 0.3s linear, max-height 0s 0.3s linear;
  max-height: 0px;
}
.collapsible {
  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
  margin-bottom: 0;
  max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
  margin-bottom: -2000px;
  transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
              visibility 0s 0.3s, max-height 0s 0.3s;
  visibility: hidden;
  max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
  height: 0;
  transition: height 0.3s linear;
  max-height: 50px;
}

/* END of the collapsible implementation; the stuff below
   is just styling for this demo */

#container {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}  


.menu {
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin: 20px;

  
}

.menu-item {
  display: block;
  background: linear-gradient(to bottom, #fff 0%,#eee 100%);
  margin: 0;
  padding: 1em;
  line-height: 1.3;
}
.collapsible .menu-item {
  border-left: 2px solid #888;
  border-right: 2px solid #888;
  background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
  background: linear-gradient(to bottom, #aaa 0%,#888 100%);
  color: white;
  cursor: pointer;
}
.menu-item.toggler:before {
  content: '';
  display: block;
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  width: 0;
  height: 0;
  float: right;
  transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
  transform: rotate(90deg);
}

body { font-family: sans-serif; font-size: 14px; }

*, *:after {
  box-sizing: border-box;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

</div> 

O nas─▒l ├žal─▒┼č─▒r?

Bunun ger├žekle┼čmesi i├žin asl─▒nda iki ge├ži┼č var. Bunlardan biri 0 margin-bottom pikselden (geni┼čletilmi┼č durumda) -2000px daralt─▒lm─▒┼č duruma ( bu cevaba benzer ┼čekilde ) ge├žer. Buradaki 2000, ilk sihirli say─▒d─▒r, kutunuzun bundan daha y├╝ksek olmayaca─č─▒ varsay─▒m─▒na dayan─▒r (2000 piksel makul bir se├žim gibi g├Âr├╝n├╝yor).

margin-bottom Tek ba┼č─▒na ge├ži┼či kullanman─▒n iki sorunu var:

  • Asl─▒nda 2000 pikselden daha y├╝ksek bir kutunuz varsa, o zaman a margin-bottom: -2000px her ┼čeyi gizlemeyecektir - daralt─▒lm─▒┼č durumda bile g├Âzle g├Âr├╝l├╝r ┼čeyler olacakt─▒r. Bu daha sonra yapaca─č─▒m─▒z k├╝├ž├╝k bir d├╝zeltmedir.
  • Ger├žek kutu 1000 piksel y├╝ksekse ve ge├ži┼činiz 300ms uzunsa, g├Âr├╝n├╝r ge├ži┼č zaten yakla┼č─▒k 150ms'den sonra biter (veya tersi y├Ânde, 150ms ge├ž ba┼člar).

Bu ikinci sorunu ├ž├Âzmek, ikinci ge├ži┼čin ger├žekle┼čti─či yerdir ve bu ge├ži┼č kavramsal olarak paketleyicinin minimum y├╝ksekli─čini hedefler ("kavramsal olarak" ├ž├╝nk├╝ min-height ├Âzelli─či bunun i├žin kullanm─▒yoruz ; daha fazlas─▒ i├žin).

A┼ča─č─▒da, her ikisi de e┼čit s├╝reye sahip olan alt kenar bo┼člu─ču ge├ži┼čini minimum y├╝kseklik ge├ži┼či ile birle┼čtirmenin bize ayn─▒ s├╝reye sahip tam y├╝kseklikten s─▒f─▒r y├╝ksekli─če kadar birle┼čtirilmi┼č bir ge├ži┼č sa─člad─▒─č─▒n─▒ g├Âsteren bir animasyon verilmi┼čtir.


yukar─▒da a├ž─▒kland─▒─č─▒ gibi animasyon

Sol ├žubuk, negatif alt kenar bo┼člu─čunun alt k─▒sm─▒ nas─▒l yukar─▒ itti─čini ve g├Âr├╝n├╝r y├╝ksekli─či azaltt─▒─č─▒n─▒ g├Âsterir. Orta ├žubuk, minimum y├╝ksekli─čin ├ž├Âkmekte olan durumda ge├ži┼čin erken bitmemesini ve geni┼čleyen durumda ge├ži┼čin ge├ž ba┼člamamas─▒n─▒ nas─▒l sa─člad─▒─č─▒n─▒ g├Âsterir. Sa─čdaki ├žubuk, ikisinin kombinasyonunun kutunun do─čru s├╝rede tam y├╝kseklikten s─▒f─▒r y├╝ksekli─če nas─▒l ge├žmesine neden oldu─čunu g├Âsterir.

Demom i├žin en y├╝ksek y├╝kseklik de─čeri olarak 50 piksele yerle┼čtim. Bu, ikinci sihir numaras─▒d─▒r ve 'y├╝ksekli─čin olaca─č─▒ kutusundan daha d├╝┼č├╝k olmal─▒d─▒r. 50px de makul g├Âr├╝n├╝yor; ─░lk etapta 50 piksel y├╝ksekli─činde olmayan bir elementi daralt─▒labilir hale getirmek isteyebilirsiniz.

Animasyonda g├Ârebilece─činiz gibi, sonu├žta ortaya ├ž─▒kan ge├ži┼č s├╝reklidir, ancak farkl─▒ de─čildir - en d├╝┼č├╝k y├╝ksekli─čin en d├╝┼č├╝k kenar bo┼člu─ču ile ayarlanan tam y├╝ksekli─če e┼čit oldu─ču anda, h─▒zda ani bir de─či┼čiklik olur. Bu, animasyonda ├žok belirgindir, ├ž├╝nk├╝ her iki ge├ži┼č i├žin do─črusal bir zamanlama i┼člevi kullan─▒r ve t├╝m ge├ži┼č ├žok yava┼č oldu─čundan. Ger├žek durumda (en ├╝stteki demo'm), ge├ži┼č sadece 300 ms s├╝rer ve alt kenar bo┼člu─ču ge├ži┼či do─črusal de─čildir. Her iki ge├ži┼č i├žin de bir├žok farkl─▒ zamanlama i┼člevi ile oynam─▒┼čt─▒m ve ortaya ├ž─▒kt─▒klar─▒m ├žok ├že┼čitli durumlar i├žin en iyi ┼čekilde ├žal─▒┼čt─▒lar.

D├╝zeltmek i├žin iki problem kald─▒:

  1. 2000 piksel y├╝ksekli─če sahip kutular─▒n daralt─▒lm─▒┼č durumda tamamen gizlenmemi┼č oldu─ču noktadan,
  2. ve gizli olmayan durumda, ge├ži┼čin ├žal─▒┼čmad─▒─č─▒ zamanlarda bile 50 piksel y├╝ksekli─činden daha k├╝├ž├╝k kutular─▒n ├žok y├╝ksek oldu─ču ters problem, ├ž├╝nk├╝ minimum y├╝kseklik onlar─▒ 50 pikselde tutar.

─░lk sorunu max-height: 0 , ├ž├Âkm├╝┼č durumda konteyner eleman─▒na a vererek, 0s 0.3s ge├ži┼č yaparak ├ž├Âz├╝yoruz. Bu, bunun ger├žekten bir ge├ži┼č olmad─▒─č─▒, max-height gecikme ile uyguland─▒─č─▒ anlam─▒na gelir ; sadece ge├ži┼č bitti─činde uygulan─▒r. Bunun do─čru ├žal─▒┼čmas─▒ i├žin, ayn─▒ zamanda max-height daralt─▒lmam─▒┼č durum i├žin n├╝merik bir se├žim yapmal─▒y─▒z . Ancak, bir say─▒dan ├žok fazla toplama i┼čleminin ge├ži┼č kalitesini etkiledi─či 2000px durumunun aksine, bu durumda, ger├žekten ├Ânemli de─čil. Bu y├╝zden sadece bu y├╝zden y├╝ksek biz bir say─▒ se├žebilirsiniz biliyorum hi├žbir y├╝kseklik ┼čimdiye kadar bu yak─▒n gelecek. Bir milyon piksel se├žtim. Milyon pikselden daha y├╝ksek bir i├žeri─či desteklemeniz gerekebilece─čini d├╝┼č├╝n├╝yorsan─▒z, o zaman 1) ├╝zg├╝n├╝m ve 2) sadece birka├ž tane s─▒f─▒r ekleyin.

─░kinci sorun, min-height asgari y├╝kseklik ge├ži┼či i├žin ger├žekte kullanmad─▒─č─▒m─▒z─▒n nedenidir . Bunun yerine, ::after kapta height 50px'den s─▒f─▒ra ge├ži┼č yapan bir sahte element var . Bu, a ile ayn─▒ etkiye sahiptir min-height : Kab─▒n, s├Âzde eleman─▒n o anda sahip oldu─ču y├╝ksekli─če g├Âre k├╝├ž├╝lmesine izin vermez. Ancak kulland─▒─č─▒m─▒z i├žin height de─čil min-height , art─▒k max-height (bir kez daha gecikme ile uygulanm─▒┼č) s├Âzde eleman─▒n ger├žek y├╝ksekli─čini ge├ži┼č bittikten sonra s─▒f─▒ra ayarlamak i├žin kullanabiliriz, en az─▒ndan ge├ži┼čin d─▒┼č─▒nda, k├╝├ž├╝k elemanlar─▒n bile Do─čru y├╝kseklik Bundan min-height daha g├╝├žl├╝ oldu─ču i├žin max-height , min-height s├Âzde eleman─▒n yerine bir konteyner kullan─▒rsak , bu i┼če yaramaz height . T─▒pk─▒ max-height ├Ânceki paragraftaki gibi, bunun max-height da ge├ži┼čin kar┼č─▒ taraf─▒ i├žin bir de─čere ihtiyac─▒ vard─▒r. Ancak bu durumda 50 pikseli se├žebiliriz.

Chrome (Win, Mac, Android, iOS), Firefox (Win, Mac, Android), Edge, IE11 (demo'mda hata ay─▒klama zahmetinde bulunmad─▒─č─▒m bir flexbox d├╝zeni sorunu hari├ž) ve Safari'de (Mac, iOS) test edildi ). Esnek kutudan bahsederken, bu i┼člemi herhangi bir esnek kutu kullanmadan yapabilmek m├╝mk├╝n olmal─▒d─▒r; Asl─▒nda IE7ÔÇÖde hemen hemen her ┼čeyin ├žal─▒┼čmas─▒n─▒ sa─člayabilece─činizi d├╝┼č├╝n├╝yorum - CSS ge├ži┼čleri olmayaca─č─▒n─▒z ger├že─či d─▒┼č─▒nda, onu anlams─▒z bir egzersiz haline getirin.


78







Bir miktar anlams─▒z jiggery-pokery ile yapabilirsiniz. Her zamanki yakla┼č─▒m─▒m, yaln─▒zca i├žerik y├╝ksekli─čini ├Âl├žmek i├žin kullan─▒lan ve stilsiz bir DIV olan tek bir ├žocu─ču olan d─▒┼č DIV'nin y├╝ksekli─čini canland─▒rmakt─▒r.

 function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
} 
 #grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
} 
 <input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div> 

Biri .measuringWrapper sadece DIV'in y├╝ksekli─čini otomatik olarak ayarlamak ve o canland─▒rmaya sahip olmaktan vazge├žmek ister , ama bu i┼če yaramaz gibi g├Âr├╝nm├╝yor (y├╝kseklik ayarlan─▒yor, ancak animasyon olu┼čmuyor).

 function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
} 
 #grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
} 
 <input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div> 

Benim yorumum, animasyonun ├žal─▒┼čmas─▒ i├žin a├ž─▒k bir y├╝ksekli─če ihtiya├ž duyulmas─▒. Y├╝kseklik (ba┼člang─▒├ž ÔÇőÔÇőveya biti┼č y├╝ksekli─či) oldu─čunda y├╝kseklik ├╝zerinde bir animasyon elde edemezsiniz auto .


76







CSS3 ge├ži┼člerini kullanarak animasyon y├╝ksekli─čine ili┼čkin g├Ârsel bir ├ž├Âz├╝m, bunun yerine dolguyu canland─▒rmakt─▒r.

Tam temizleme efektini tam olarak elde edemezsiniz, ancak ge├ži┼č s├╝resi ve dolgu de─čerleriyle u─čra┼čmak sizi yeterince yak─▒n tutmal─▒d─▒r. A├ž─▒k├ža y├╝kseklik / maksimum y├╝kseklik ayarlamak istemiyorsan─▒z, arad─▒─č─▒n─▒z ┼čey bu olmal─▒d─▒r.

 div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}
 

http://jsfiddle.net/catharsis/n5XfG/17/ (stephband'─▒n jsFiddle ├╝st├╝ndeki riff)


49







Ge├žici ├ž├Âz├╝m├╝m, g├╝zel bir p├╝r├╝zs├╝z animasyon i├žin maksimum y├╝ksekli─če tam i├žerik y├╝ksekli─čine ge├ži┼č yapmak, ard─▒ndan i├žeri─čin serbest├že yeniden boyutland─▒r─▒labilmesi i├žin maksimum y├╝ksekli─či 9999 piksel olarak ayarlamak i├žin bir ge├ži┼čEnd geri ├ža─čr─▒s─▒ kullanmakt─▒r.

 var content = $('#content');
content.inner = $('#content .inner'); // inner div needed to get size of content when closed

// css transition callback
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999); // try setting this to 'none'... I dare you!
    }
});

$('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        
        // disable transitions & set max-height to content height
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){
            
            // enable & start transition
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
        // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
        
    }else if(content.hasClass('open')){  
        
        content.contentHeight += content.inner.outerHeight(); // if closed, add inner height to content height
        content.css({
            'max-height': content.contentHeight,
            'opacity': 1
        });
        
    }
}); 
 .transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-family:Arial;
    line-height: 3ex;
}
code {
    display: inline-block;
    background: #fafafa;
    padding: 0 1ex;
}
#toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
}
#content {
    overflow:hidden;
    margin:10px;
    border:1px solid #666;
    background:#efefef;
    opacity:1;
}
#content .inner {
    padding:10px;
    overflow:auto;
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="content" class="open">
    <div class="inner">
        <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
        <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
        <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
        <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>
    </div>
</div>

<br />

<button id="toggle">Challenge Accepted!</button> 


45


2012-03-19





Kabul edilen cevap ├žo─ču durumda i┼če yarar, ancak div y├╝ksekli─čin b├╝y├╝k ├Âl├ž├╝de de─či┼čebilece─či durumlarda iyi sonu├ž vermez - animasyon h─▒z─▒ i├žeri─čin ger├žek y├╝ksekli─čine ba─čl─▒ de─čildir ve dalgal─▒ g├Âr├╝nebilir.

Ger├žek animasyonu CSS ile yine de ger├žekle┼čtirebilirsiniz, ancak kullanmaya ├žal─▒┼čmak yerine, ├Â─čelerin y├╝ksekli─čini hesaplamak i├žin JavaScript kullanman─▒z gerekir auto . Uyumluluk istiyorsan─▒z bunu biraz de─či┼čtirmeniz gerekebilir, ancak jQuery gerekmez (Chrome'un en son s├╝r├╝m├╝nde ├žal─▒┼č─▒r :)).

 window.toggleExpand = function(element) {
    if (!element.style.height || element.style.height == '0px') { 
        element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
    } else {
        element.style.height = '0px';
    }
} 
 #menu #list {
    height: 0px;
    transition: height 0.3s ease;
    background: #d5d5d5;
    overflow: hidden;
} 
 <div id="menu">
    <input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
    <ul id="list">
        <!-- Works well with dynamically-sized content. -->
        <li>item</li>
        <li><div style="height: 100px; width: 100px; background: red;"></div></li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div> 


35







max-height Her durum i├žin farkl─▒ ge├ži┼č hareket h─▒z─▒ ve gecikme ile kullan─▒n .

HTML:

 <a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>
 

CSS:

 #toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}
 

├ľrne─če bak─▒n─▒z: http://jsfiddle.net/0hnjehjc/1/


26







Sabit kodlanm─▒┼č de─čer yok.

JavaScript yok.

Hi├žbir yakla┼č─▒m yok.

─░┼čin p├╝f noktas─▒ div , taray─▒c─▒n─▒n% 100'├╝n ne anlama geldi─čini anlamas─▒n─▒ sa─člamak i├žin gizli ve kopyalanm─▒┼č bir y├Ântem kullanmakt─▒r .

Bu y├Ântem, canland─▒rmak istedi─činiz ├Â─čenin DOM'sini ├žo─čaltabildi─činiz zaman uygundur.

 .outer {
  border: dashed red 1px;
  position: relative;
}

.dummy {
  visibility: hidden;
}

.real {
  position: absolute;
  background: yellow;
  height: 0;
  transition: height 0.5s;
  overflow: hidden;
}

.outer:hover>.real {
  height: 100%;
} 
 Hover over the box below:
<div class="outer">
  <!-- The actual element that you'd like to animate -->
  <div class="real">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
  <!-- An exact copy of the element you'd like to animate. -->
  <div class="dummy" aria-hidden="true">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
</div> 


26







Burada Element.scrollHeight yararl─▒ olabilecek ve yine de saf bir CSS ge├ži┼či ile kullan─▒labilecek ├Âzellikten ├žok az s├Âz edildi . ├ľzellik, i├žeri─činin daralt─▒lm─▒┼č y├╝kseklikten (├Ârne─čin height: 0 ) dolay─▒ ta┼č─▒p ta┼čmad─▒─č─▒na bak─▒lmaks─▒z─▒n her zaman bir ├Â─čenin "tam" y├╝ksekli─čini i├žerir .

Bu haliyle height: 0 (etkili bir ┼čekilde tamamen ├ž├Âkm├╝┼č) bir eleman i├žin, "normal" veya "tam" y├╝ksekli─či, scrollHeight de─čeri ( halihaz─▒rda bir piksel uzunlu─ču) vas─▒tas─▒yla halen haz─▒r halde bulunmaktad─▒r .

B├Âyle bir element i├žin, ├Ârne─čin ( ul orijinal soruya g├Âre) gibi ayarlanm─▒┼č bir ge├ži┼če sahip oldu─čunu varsayarsak :

 ul {
    height: 0;
    transition: height 1s; /* An example transition. */
}
 

─░stenilen animasyonlu "geni┼člemeyi", yaln─▒zca CSS kullanarak, a┼ča─č─▒dakine benzer bir ┼čekilde tetikleyebiliriz (burada ul de─či┼čkenlerin listeyi ifade etti─či varsay─▒lmaktad─▒r ):

 ul.style.height = ul.scrollHeight + "px";
 

Bu kadar. Listeyi daraltman─▒z gerekirse, a┼ča─č─▒daki iki ifadeden birini ger├žekle┼čtirir:

 ul.style.height = "0";
ul.style.removeProperty("height");
 

├ľzel kullan─▒m durumum, bilinmeyen ve ├žo─ču zaman hat─▒r─▒ say─▒l─▒r uzunlu─ča sahip animasyon listelerinin etraf─▒nda d├Ân├╝yordu, bu y├╝zden keyfi bir ┼čekilde "yeterince b├╝y├╝k" height ya da belirtti─čim max-height ve aniden kayd─▒rman─▒z gereken i├žerik kesme (veya overflow: auto ├Ârne─čin) riskini belirleme konusunda rahat de─čildim. . Ek olarak, hareket h─▒z─▒ ve zamanlama, max-height temelli ├ž├Âz├╝mlerle kopar , ├ž├╝nk├╝ kullan─▒lan y├╝kseklik, ula┼čmas─▒ gerekenden ├žok daha k─▒sa bir s├╝rede maksimum de─čerine max-height ula┼čabilir 9999px . Ekran ├ž├Âz├╝n├╝rl├╝kleri artt─▒k├ža, piksel uzunluklar─▒ da 9999px a─čz─▒ma k├Ât├╝ bir tat veriyor. Bu ├Âzel ├ž├Âz├╝m bence sorunu zarif bir ┼čekilde ├ž├Âz├╝yor.

Son olarak, CSS adres yazarlar─▒n─▒n gelecekteki revizyonlar─▒n─▒n bu t├╝r ┼čeyleri daha da zarif bir ┼čekilde yapmalar─▒ gerekti─čini - "hesaplanm─▒┼č" vs "kullan─▒lm─▒┼č" ve "├ž├Âz├╝mlenmi┼č" de─čerler kavram─▒n─▒ tekrar g├Âzden ge├žirin ve ge├ži┼člerin hesaplananlar i├žin ge├žerli olup olmad─▒─č─▒n─▒ d├╝┼č├╝n├╝n width ve height (┼ču anda ├Âzel bir muamele biraz al─▒yor) ge├ži┼čleri de dahil olmak ├╝zere de─čerleri .


25


2016-07-05





Bunu g├Ânderdi─čimde zaten 30'dan fazla cevap var, ancak cevab─▒m─▒n ├Ânceden cevaplanm─▒┼č cevab─▒n ├╝zerine cevap verdi─čini d├╝┼č├╝n├╝yorum .

Basit├že kullanma max-height ve CSS3 ge├ži┼člerinden kaynaklanan sorundan memnun de─čildim , ├ž├╝nk├╝ bir├žok yorumcunun da belirtti─či gibi, max-height de─čerinizi ger├žek y├╝ksekli─če ├žok yak─▒n ayarlamak zorundas─▒n─▒z ya da bir gecikme olacak. Bu problemin bir ├Ârne─či i├žin bu JSFiddle'a bak─▒n .

Bunu a┼čmak i├žin (hala JavaScript kullanm─▒yorken), transform: translateY CSS de─čerini ge├žen ba┼čka bir HTML ├Â─česi ekledim .

Hem bu ara├žlar max-height ve translateY kullan─▒l─▒r: max-height iken, bunun alt─▒ndaki elemanlar a┼ča─č─▒ itmek i├žin eleman verir translateY istedi─čimiz "anl─▒k" bir etki verir. max-height Hala mesele var, ancak etkisi azald─▒. Bu, max-height de─čeriniz i├žin daha b├╝y├╝k bir y├╝kseklik ayarlayabilece─činiz ve daha az endi┼čelenebilece─činiz anlam─▒na gelir .

Genel fayda, geri d├Ân├╝┼č (├ž├Âk├╝┼č) s─▒ras─▒nda, kullan─▒c─▒n─▒n translateY animasyonu hemen g├Ârmesidir , bu y├╝zden ne kadar s├╝rd├╝─č├╝ ├Ânemli de─čildir max-height .

Keman Olarak ├ç├Âz├╝m

 body {
  font-family: sans-serif;
}

.toggle {
  position: relative;
  border: 2px solid #333;
  border-radius: 3px;
  margin: 5px;
  width: 200px;
}

.toggle-header {
  margin: 0;
  padding: 10px;
  background-color: #333;
  color: white;
  text-align: center;
  cursor: pointer;
}

.toggle-height {
  background-color: tomato;
  overflow: hidden;
  transition: max-height .6s ease;
  max-height: 0;
}

.toggle:hover .toggle-height {
  max-height: 1000px;
}

.toggle-transform {
  padding: 5px;
  color: white;
  transition: transform .4s ease;
  transform: translateY(-100%);
}

.toggle:hover .toggle-transform {
  transform: translateY(0);
} 
 <div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div> 


21







Tamam, san─▒r─▒m s├╝per basit bir cevapla geldim ... hay─▒r max-height , relative konumland─▒rma kullan─▒yor , li elemanlar ├╝zerinde ├žal─▒┼č─▒yor ve saf CSS. Firefox'tan ba┼čka hi├žbir ┼čey test etmedim, CSS taraf─▒ndan de─čerlendirilmesine ra─čmen, t├╝m taray─▒c─▒larda ├žal─▒┼čmas─▒ gerekiyor.

FIDDLE: http://jsfiddle.net/n5XfG/2596/

CSS

 .wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }
 

HTML

 <div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>
 

17







EDIT: G├╝ncellenmi┼č cevap i├žin a┼ča─č─▒ kayd─▒r─▒n
Bir a├ž─▒l─▒r liste yap─▒yordum ve bu Yaz─▒y─▒ g├Ârd├╝m ... bir├žok farkl─▒ cevap var ama a├ž─▒lan listeyi de payla┼čmaya karar verdim, ... M├╝kemmel de─čil ama en az─▒ndan sadece css kullanacak y─▒k─▒lmak! Listeyi g├Âr├╝n├╝me d├Ân├╝┼čt├╝rmek i├žin transform: translateY (y) 'yi kullan─▒yorum ...
Testte daha fazlas─▒n─▒ g├Ârebilirsiniz:
http://jsfiddle.net/BVEpc/4/
Her li'nin arkas─▒na div yerle┼čtirdim ├ž├╝nk├╝ a├ž─▒l─▒r liste yukar─▒dan geliyor ve onlara d├╝zg├╝n bir ┼čekilde g├Âstermek i├žin bu gerekli, benim div kodum:

 #menu div {
    transition: 0.5s 1s;
    z-index:-1;
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}
 

ve vurgulu ┼čudur:

 #menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}
 

ve ul y├╝ksekli─či i├žeri─če ayarlanm─▒┼č oldu─čundan, v├╝cut i├žeri─činizin ├╝stesinden gelebilir, bu y├╝zden ul i├žin bunu yapt─▒m:

  #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    overflow:hidden;
}
 

ve vurgulu:

 #menu > li:hover ul {
     transition:none;
     visibility:visible;
}
 

Ge├ži┼čten sonraki ikinci zaman gecikmeli ve a├ž─▒lan listem benim a├ž─▒lmadan kapand─▒ktan
sonra gizlenecek ... Daha sonra birinin bundan yararlanabilece─čini umuyorum .

EDIT: Ben sadece bu prototip kullanarak ppl inanam─▒yorum! Bu a├ž─▒l─▒r men├╝ sadece bir alt men├╝ i├žindir ve hepsi bu kadar !! IE 8 deste─či ile hem ltr hem de rtl y├Ân├╝ i├žin iki alt men├╝ye sahip olabilecek daha iyi bir g├╝ncelleme yapt─▒m.
LTR i├žin
keman RTL i├žin keman,
umar─▒m birileri bunu gelecekte faydal─▒ bulmaktad─▒r.


15







Y├╝kseklikten: 0'a y├╝kseklikten ge├ži┼č yapabilirsiniz: otomatik, ayr─▒ca minimum y├╝kseklik ve maksimum y├╝kseklik sa─člaman─▒z─▒ sa─člar.

 div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}
 

11







Flexbox ├ç├Âz├╝m├╝

Art─▒lar─▒:

  • basit
  • JS yok
  • yumu┼čak bir ge├ži┼č

Eksileri:

  • Eleman─▒n sabit y├╝kseklikte esnek bir kaba konmas─▒ gerekir

├çal─▒┼čma ┼čekli her zaman esnek temellere dayan─▒yor: i├žeri─če sahip element ├╝zerinde otomatik ve bunun yerine esnek-b├╝y├╝mek ve esnek-k├╝├ž├╝lme ge├ži┼či.

D├╝zenleme: Geli┼čtirilmi┼č JS Fiddle, Xbox One aray├╝z├╝nden ilham ald─▒.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.25s;
  font-family: monospace;
}

body {
  margin: 10px 0 0 10px;
}

.box {
  width: 150px;
  height: 150px;
  margin: 0 2px 10px 0;
  background: #2d333b;
  border: solid 10px #20262e;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
}

.space {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 0;    
}

p {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  background: #20262e;
  padding: 10px;
  width: 100%;
  text-align: left;
  color: white;
}

.box:hover .space {
  flex-grow: 0;
  flex-shrink: 1;
}
  
.box:hover p {
  flex-grow: 1;
  flex-shrink: 0;    
} 
 <div class="box">
  <div class="space"></div>
  <p>
    Super Metroid Prime Fusion
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Resident Evil 2 Remake
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Yolo The Game
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Final Fantasy 7 Remake + All Additional DLC + Golden Tophat
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    DerpVille
  </p>
</div> 

JS Fiddle


9







San─▒r─▒m ger├žekten sa─člam bir ├ž├Âz├╝m buldum

TAMAM! Bu sorunun internet kadar eski oldu─čunu biliyorum ama mutant-ge├ži┼č denilen bir eklentiye d├Ând├╝─č├╝m bir ├ž├Âz├╝m├╝m oldu─čunu d├╝┼č├╝n├╝yorum . style="" ├ç├Âz├╝m├╝m, DOMÔÇÖde bir de─či┼čiklik oldu─čunda, izlenen ├Â─čelerin niteliklerini belirler . Sonu├ž, ge├ži┼čleriniz i├žin iyi ole CSS kullanabilmeniz ve k├Ât├╝ d├╝zeltmeler veya ├Âzel javascript kullanmaman─▒zd─▒r. Yapman─▒z gereken tek ┼čey, s├Âz konusu element ├╝zerinde neyi izlemek istedi─činizi ayarlamakt─▒r data-mutant-attributes="X" .

 <div data-mutant-attributes="height">                                                                      
        This is an example with mutant-transition                                                                                                          
    </div>
 

Bu kadar! Bu ├ž├Âz├╝m, DOM'daki de─či┼čiklikleri takip etmek i├žin MutationObserver kullan─▒yor . Bu nedenle, hi├žbir ┼čeyi elle ayarlamak i├žin javascript kullanmak zorunda de─čilsiniz. De─či┼čiklikler otomatik olarak izlenir. Ancak, MutationObserver kulland─▒─č─▒ndan, bu yaln─▒zca IE11 + 'da ge├ži┼č yapacakt─▒r.

Kemanlar!


8







@ Jake'in cevab─▒n─▒ geni┼čleterek, ge├ži┼č maksimum y├╝kseklik de─čerine kadar uzanacak ve son derece h─▒zl─▒ bir animasyona yol a├žacakt─▒r - e─čer her ikisinin de ge├ži┼člerini ayarlarsan─▒z: ├╝zerine gelin ve uzakla┼č─▒n, ├ž─▒lg─▒n h─▒z─▒ biraz daha fazla kontrol edebilirsiniz.

B├Âylece, li: hover, farenin durumuna girdi─či zamand─▒r ve daha sonra ├╝zerine gelinmeyen ├Âzelli─če ge├ži┼č, fare izni olur.

Umar─▒m bu biraz yard─▒mc─▒ olacakt─▒r.

├ľrne─čin:

 .sidemenu li ul {
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */
 

─░┼čte bir keman: http://jsfiddle.net/BukwJ/


6







D├╝─č├╝m baz─▒nda sabit kod gerektirmeden 0, otomatik (tam boy ve esnek) dahil herhangi bir ba┼člang─▒├ž ÔÇőÔÇőy├╝ksekli─činden veya ba┼člat─▒lacak herhangi bir kullan─▒c─▒ koduna ge├žmenin bir yolu: https://github.com/csuwildcat / ge├ži┼či otomatik . Bu temelde ne istedi─činizi i├žin kutsal k├óse, inan─▒yorum -> http://codepen.io/csuwldcat/pen/kwsdF . A┼ča─č─▒daki JS dosyas─▒n─▒ sayfan─▒za ekleyin ve bundan sonra yapman─▒z gereken tek bir boolean niteli─či eklemek / kald─▒rmak - reveal="" - geni┼čletmek ve daraltmak istedi─činiz d├╝─č├╝mlerden.

─░┼čte kullan─▒c─▒ olarak yapman─▒z gerekenler, ├Ârnek kodun alt─▒nda bulunan kod blo─čunu ekledikten sonra:

 /*** Nothing out of the ordinary in your styles ***/
<style>
    div {
        height: 0;
        overflow: hidden;
        transition: height 1s;
    }
</style>

/*** Just add and remove one attribute and transition to/from auto! ***/

<div>
    I have tons of content and I am 0px in height you can't see me...
</div>

<div reveal>
     I have tons of content and I am 0px in height you can't see me...
     but now that you added the 'reveal' attribute, 
     I magically transitioned to full height!...
</div>
 

─░┼čte sayfan─▒za eklemek i├žin kod blo─ču, bundan sonra, hepsi sos:

Bu JS dosyas─▒n─▒ sayfan─▒za b─▒rak─▒n - hepsi Just Works Ôäó

/ * Y├╝kseklik kodu: otomatik; ge├ži┼č * /

 (function(doc){

/* feature detection for browsers that report different values for scrollHeight when an element's overflow is hidden vs visible (Firefox, IE) */
var test = doc.documentElement.appendChild(doc.createElement('x-reveal-test'));
    test.innerHTML = '-';
    test.style.cssText = 'display: block !important; height: 0px !important; padding: 0px !important; font-size: 0px !important; border-width: 0px !important; line-height: 1px !important; overflow: hidden !important;';
var scroll = test.scrollHeight || 2;
doc.documentElement.removeChild(test);

var loading = true,
    numReg = /^([0-9]*\.?[0-9]*)(.*)/,
    skipFrame = function(fn){
      requestAnimationFrame(function(){
        requestAnimationFrame(fn);
      });
    },
    /* 2 out of 3 uses of this function are purely to work around Chrome's catastrophically busted implementation of auto value CSS transitioning */
    revealFrame = function(el, state, height){
        el.setAttribute('reveal-transition', 'frame');
        el.style.height = height;
        skipFrame(function(){
            el.setAttribute('reveal-transition', state);
            el.style.height = '';
        });
    },
    transitionend = function(e){
      var node = e.target;
      if (node.hasAttribute('reveal')) {
        if (node.getAttribute('reveal-transition') == 'running') revealFrame(node, 'complete', '');
      } 
      else {
        node.removeAttribute('reveal-transition');
        node.style.height = '';
      }
    },
    animationstart = function(e){
      var node = e.target,
          name = e.animationName;   
      if (name == 'reveal' || name == 'unreveal') {

        if (loading) return revealFrame(node, 'complete', 'auto');

        var style = getComputedStyle(node),
            offset = (Number(style.paddingTop.match(numReg)[1])) +
                     (Number(style.paddingBottom.match(numReg)[1])) +
                     (Number(style.borderTopWidth.match(numReg)[1])) +
                     (Number(style.borderBottomWidth.match(numReg)[1]));

        if (name == 'reveal'){
          node.setAttribute('reveal-transition', 'running');
          node.style.height = node.scrollHeight - (offset / scroll) + 'px';
        }
        else {
            if (node.getAttribute('reveal-transition') == 'running') node.style.height = '';
            else revealFrame(node, 'running', node.scrollHeight - offset + 'px');
        }
      }
    };

doc.addEventListener('animationstart', animationstart, false);
doc.addEventListener('MSAnimationStart', animationstart, false);
doc.addEventListener('webkitAnimationStart', animationstart, false);
doc.addEventListener('transitionend', transitionend, false);
doc.addEventListener('MSTransitionEnd', transitionend, false);
doc.addEventListener('webkitTransitionEnd', transitionend, false);

/*
    Batshit readyState/DOMContentLoaded code to dance around Webkit/Chrome animation auto-run weirdness on initial page load.
    If they fixed their code, you could just check for if(doc.readyState != 'complete') in animationstart's if(loading) check
*/
if (document.readyState == 'complete') {
    skipFrame(function(){
        loading = false;
    });
}
else document.addEventListener('DOMContentLoaded', function(e){
    skipFrame(function(){
        loading = false;
    });
}, false);

/* Styles that allow for 'reveal' attribute triggers */
var styles = doc.createElement('style'),
    t = 'transition: none; ',
    au = 'animation: reveal 0.001s; ',
    ar = 'animation: unreveal 0.001s; ',
    clip = ' { from { opacity: 0; } to { opacity: 1; } }',
    r = 'keyframes reveal' + clip,
    u = 'keyframes unreveal' + clip;

styles.textContent = '[reveal] { -ms-'+ au + '-webkit-'+ au +'-moz-'+ au + au +'}' +
    '[reveal-transition="frame"] { -ms-' + t + '-webkit-' + t + '-moz-' + t + t + 'height: auto; }' +
    '[reveal-transition="complete"] { height: auto; }' +
    '[reveal-transition]:not([reveal]) { -webkit-'+ ar +'-moz-'+ ar + ar +'}' +
    '@-ms-' + r + '@-webkit-' + r + '@-moz-' + r + r +
    '@-ms-' + u +'@-webkit-' + u + '@-moz-' + u + u;

doc.querySelector('head').appendChild(styles);

})(document);
 

/ * DEMO Kodu * /

     document.addEventListener('click', function(e){
      if (e.target.nodeName == 'BUTTON') {
        var next = e.target.nextElementSibling;
        next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
      }
    }, false);
 

6







Jake'in maksimum y├╝ksekli─či canland─▒rmak i├žin verdi─či cevap harika, ama b├╝y├╝k bir maksimum y├╝kseklik can s─▒k─▒c─▒ durumdan kaynaklanan gecikmeyi buldum.

Biri daralt─▒labilir i├žeri─či bir i├ž div i├žine ta┼č─▒yabilir ve i├ž div'in y├╝ksekli─čini elde ederek maksimum y├╝ksekli─či hesaplayabilir (JQuery ile outerHeight () olur).

 $('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});
 

─░┼čte bir jsfiddle ba─člant─▒s─▒: http://jsfiddle.net/pbatey/duZpT

Gereken mutlak minimum miktarda kod i├žeren bir jsfiddle: http://jsfiddle.net/8ncjjxh8/


6







Bu konunun ya┼čland─▒─č─▒n─▒n fark─▒nday─▒m, ancak belirli Google aramalar─▒nda ├╝st s─▒ralarda yer ald─▒─č─▒ndan g├╝ncellenmeye de─čer oldu─čunu d├╝┼č├╝n├╝yorum.

Ayr─▒ca sadece ├Â─čenin kendi y├╝ksekli─čini al─▒r / ayarlars─▒n─▒z:

 var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';
 

Bu Javascript'i, target_box'─▒n bir inline script etiketindeki kapama etiketinden hemen sonra atman─▒z gerekir.


5







Bunu yapabildim. Bir var .child & bir .parent div. ├çocuk dal─▒s─▒, absolute konumland─▒rmayla ebeveynin geni┼čli─čine / y├╝ksekli─čine m├╝kemmel bir ┼čekilde uyar . Daha sonra de─čerini a┼ča─č─▒ya translate itmek i├žin ├Âzelli─či canland─▒r─▒n . ├çok yumu┼čak bir animasyon, burada ba┼čka bir ├ž├Âz├╝m gibi herhangi bir aksakl─▒k veya a┼ča─č─▒ taraf yok. Y 100%

Bunun gibi bir ┼čey, s├Âzde kod

 .parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}
 

Bir belirtmek istiyorum height ├╝zerine .parent de, px , % gibi veya izinli auto . Bu div daha sonra .child a┼ča─č─▒ kayarken divi maskeler .


5







─░┼čte jQuery ile birlikte kulland─▒─č─▒m bir ├ž├Âz├╝m. Bu, a┼ča─č─▒daki HTML yap─▒s─▒ i├žin ├žal─▒┼č─▒r:

 <nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>
 

ve i┼člev:

     $('#main-nav li ul').each(function(){
        $me = $(this);

        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;

        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });
 

Daha sonra kullanarak y├╝ksekli─či ayarlamak ve kald─▒rmak i├žin bir t─▒klama i┼člevini kullanabilirsiniz. css()

 $('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');

    $(this).parent().addClass('current');

    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})
 

CSS:

 #main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }
 

4







Ge├ženlerde ge├ži┼č oldum max-height ├╝zerindeki li elemanlar yerine sarma ul .

Muhakeme K├╝├ž├╝k i├žin gecikme olmas─▒d─▒r max-heights b├╝y├╝k k─▒yasla (hi├ž de─čilse) ├žok daha az fark oldu─čunu max-heights , ve de benim ayarlayabilirsiniz max-height g├Âre ilgili de─čer font-size aras─▒nda li kullanarak ziyade baz─▒ keyfi b├╝y├╝k say─▒s─▒ndan daha ems ya rems .

Yaz─▒ tipi boyutum ise 1rem , (sar─▒lm─▒┼č metni yerle┼čtirmek i├žin) max-height gibi bir ┼čey ayarlar─▒m 3rem . Burada bir ├Ârnek g├Ârebilirsiniz:

http://codepen.io/mindfullsilence/pen/DtzjE


4







Her ┼čeyi ayr─▒nt─▒l─▒ olarak okumam─▒┼čt─▒m ancak yak─▒n zamanda bu sorunu ya┼čad─▒m ve a┼ča─č─▒dakileri yapt─▒m:

 div.class{
   min-height:1%;
   max-height:200px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   overflow:hidden;
}

div.class:hover{
   min-height:100%;
   max-height:3000px;
}
 

Bu, ilk ba┼čta 200 piksel y├╝ksekli─če kadar i├žerik g├Âsteren bir div'e sahip olman─▒za izin verir ve vurgulu halindeyken boyutu en az─▒ndan div'in t├╝m i├žeri─či kadar y├╝ksek hale gelir. Div 3000px de─čil, 3000px dayat─▒─č─▒m s─▒n─▒rd─▒r. Non-hover ├╝zerinde ge├ži┼č yapt─▒─č─▒n─▒zdan emin olun, aksi halde baz─▒ garip resimler elde edebilirsiniz. Bu ┼čekilde: vurgulu olmayandan devral─▒r: vurgulu.

Ge├ži┼č px formuna% veya otomatik olarak ├žal─▒┼čmaz. Ayn─▒ ├Âl├ž├╝ birimini kullanman─▒z gerekir. Bu benim i├žin iyi ├žal─▒┼č─▒yor. HTML5 kullanarak m├╝kemmel yapar ....

Unutma, her zaman etrafta bir i┼č vard─▒r ...; )

Birisi bu yararl─▒ bulur umar─▒m


3







Bu tam olarak soruna bir "├ž├Âz├╝m" de─čil, daha fazla ge├žici ├ž├Âz├╝m olabilir. Yaln─▒zca metinle yaz─▒lm─▒┼č ┼čekilde ├žal─▒┼č─▒r, ancak gerekti─činde di─čer ├Â─čelerle de ├žal─▒┼čacak ┼čekilde de─či┼čtirilebilir.

 .originalContent {
    font-size:0px;
    transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
    font-size:14px;
}
 

─░┼čte bir ├Ârnek: http://codepen.io/overthemike/pen/wzjRKa

Temel olarak, font boyutunu 0 olarak ayarlay─▒n ve y├╝ksekli─či, maksimum y├╝ksekli─či veya maksimum YY yerine (veya yerine Y () vb.), ─░stedi─činiz y├╝ksekli─če d├Ân├╝┼čt├╝rmek i├žin yeterince h─▒zl─▒ bir ┼čekilde ge├ži┼č yap─▒n. CSS ile as─▒l y├╝ksekli─či otomati─če d├Ân├╝┼čt├╝rmek ┼ču anda m├╝mk├╝n de─čildir, ancak i├žindeki i├žeri─či d├Ân├╝┼čt├╝rmek, yaz─▒ tipi boyutu ge├ži┼čidir.

  • Not - codepen'de javascript var, ancak tek ama├ž akordeon i├žin t─▒klay─▒nca css s─▒n─▒flar─▒n─▒ eklemek / kald─▒rmak. Bu gizli radyo butonlar─▒ ile yap─▒labilir, fakat ben sadece y├╝kseklik d├Ân├╝┼č├╝m├╝ne odaklanmam─▒┼čt─▒m.

3







Sorunun JavaScript olmadan bir ├ž├Âz├╝m istedi─čini anl─▒yorum. Fakat ilgilenenler i├žin burada birazc─▒k JS kullanan ├ž├Âz├╝m├╝m.

Tamam, b├Âylece y├╝ksekli─či varsay─▒lan olarak de─či┼čecek olan eleman─▒n css'i height: 0; ve a├ž─▒ld─▒─č─▒nda ayarlan─▒r height: auto; . Ayr─▒ca transition: height .25s ease-out; . Ama tabii ki sorun ┼čudur ki, ┼čuraya veya ┼čuradan ge├žmeyecek. height: auto;

├ľyleyse yapt─▒─č─▒m ┼čey, a├žarken veya kapat─▒rken scrollHeight ├Â─čenin ├Âzelli─čine g├Âre y├╝ksekli─či ayarlay─▒n . Bu yeni sat─▒r i├ži stil y├╝ksek spesifitesi ve hem ge├žersiz k─▒lar height: auto; ve height: 0; ve ge├ži┼č ├žal─▒┼č─▒r.

A├žarken transitionend , sadece bir kez ├žal─▒┼čacak bir olay dinleyicisi ekliyorum, sonra height: auto; bu alt men├╝lerde https://codepen.io/ninjabonsai/ ile daha karma┼č─▒k bir ├Ârnekte oldu─ču gibi, eleman─▒n gerekti─činde yeniden boyutland─▒r─▒lmas─▒na olanak tan─▒yacak olan sat─▒r i├ži stilini kald─▒r─▒n. kalem / GzYyVe

Kapat─▒rken, gecikme olmadan setTimeout kullanarak bir sonraki olay d├Âng├╝s├╝n├╝n hemen ard─▒ndan sat─▒r i├ži stilini kald─▒r─▒r─▒m . Bu height: auto; , geri ge├ži┼či sa─člayan ge├žici olarak ge├žersiz k─▒l─▒n─▒r anlam─▒na gelir height 0;

 const showHideElement = (element, open) => {
  element.style.height = element.scrollHeight + 'px';
  element.classList.toggle('open', open);

  if (open) {
    element.addEventListener('transitionend', () => {
      element.style.removeProperty('height');
    }, {
      once: true
    });
  } else {
    window.setTimeout(() => {
      element.style.removeProperty('height');
    });
  }
}

const menu = document.body.querySelector('#menu');
const list = document.body.querySelector('#menu > ul')

menu.addEventListener('mouseenter', () => showHideElement(list, true));
menu.addEventListener('mouseleave', () => showHideElement(list, false)); 
 #menu>ul {
  height: 0;
  overflow: hidden;
  background-color: #999;
  transition: height .25s ease-out;
}

#menu>ul.open {
  height: auto;
} 
 <div id="menu">
  <a>hover me</a>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div> 


3







Sa─članan kodlanm─▒┼č maksimum y├╝kseklik de─čeri ger├žek y├╝kseklikten daha b├╝y├╝k de─čilse, Jake'in maksimum y├╝kseklik ├ž├Âz├╝m├╝ iyi ├žal─▒┼č─▒r (aksi halde istenmeyen gecikmeler ve zamanlama sorunlar─▒ vard─▒r). ├ľte yandan, e─čer kodlanm─▒┼č bir de─čer yanl─▒┼čl─▒kla ger├žek y├╝ksekli─činden daha b├╝y├╝k de─čilse, eleman tamamen a├ž─▒lmayacakt─▒r.

A┼ča─č─▒daki CSS sadece ├ž├Âz├╝m├╝, ortaya ├ž─▒kan ger├žek boyutlar─▒n ├žo─čundan daha b├╝y├╝k olmas─▒ gereken kodlanm─▒┼č bir boyut da gerektirir. Ancak bu ├ž├Âz├╝m, ger├žek boyutun baz─▒ durumlarda sabit kodlanm─▒┼č boyuttan daha b├╝y├╝k olmas─▒ durumunda da i┼če yarar. Bu durumda, ge├ži┼č biraz atlayabilir, ancak hi├žbir zaman k─▒smen g├Âr├╝n├╝r bir eleman b─▒rakmaz. Dolay─▒s─▒yla bu ├ž├Âz├╝m, bilinmeyen i├žerik i├žin de kullan─▒labilir; ├Ârne─čin, yaln─▒zca i├žeri─čin genellikle x pikselden b├╝y├╝k olmad─▒─č─▒n─▒ bildi─činiz bir veritaban─▒ndan, ancak istisnalar da olabilir.

Fikir, kenar bo┼člu─ču (veya biraz farkl─▒ bir animasyon i├žin kenar bo┼člu─ču) i├žin negatif bir de─čer kullanmak ve i├žerik ├Â─česini ta┼čan bir orta ├Â─čeye yerle┼čtirmek: gizlidir. ─░├žerik eleman─▒n─▒n negatif marj─▒ b├Âylece orta eleman─▒n y├╝ksekli─čini azalt─▒r.

A┼ča─č─▒daki kod, kenar bo┼člu─čundaki -150px ila 0px aras─▒ndaki bir ge├ži┼či kullan─▒r. Bu tek ba┼č─▒na, i├žerik ├Â─česi 150 pikselden daha y├╝ksek olmad─▒─č─▒ s├╝rece iyi ├žal─▒┼č─▒r. Ek olarak, orta eleman i├žin maksimum y├╝kseklikte 0px'den% 100'e bir ge├ži┼č kullan─▒r. Bu, i├žerik eleman─▒ 150 pikselden daha y├╝ksekse, nihayet orta eleman─▒ gizler. Maksimum y├╝kseklik i├žin ge├ži┼č, kapan─▒┼č s─▒ras─▒nda sadece bir saniye geciktirmek i├žin kullan─▒l─▒r, d├╝zg├╝n bir g├Ârsel etki i├žin de─čil (ve bu nedenle 0 pikselden% 100'e kadar ko┼čabilir).

CSS:

 .content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}
 

HTML:

 <div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>
 

Marj taban─▒ de─čeri negatif olmal─▒ ve i├žerik ├Â─česinin ger├žek y├╝ksekli─čine m├╝mk├╝n oldu─čunca yak─▒n olmal─▒d─▒r. E─čer (absoute de─čeri) daha b├╝y├╝kse, maksimum kodlu ├ž├Âz├╝mlerde oldu─ču gibi benzer gecikme ve zamanlama problemleri vard─▒r, ancak sabit kodlanm─▒┼č boyut ger├žek olandan daha b├╝y├╝k olmad─▒─č─▒ s├╝rece s─▒n─▒rlanabilir. E─čer marj dibi i├žin mutlak de─čer ger├žek y├╝ksekli─činden daha k├╝├ž├╝kse, tansiyon biraz z─▒plar. Ge├ži┼čin ard─▒ndan her durumda i├žerik ├Â─česi ya tamamen g├Âsterilir veya tamamen ├ž─▒kar─▒l─▒r.

Daha fazla ayr─▒nt─▒ i├žin http://www.taccgl.org/blog/css_transition_display.html#combined_height blog yaz─▒ma bak─▒n


2







Uygun bir ├ž├Âz├╝m yok gibi g├Âr├╝n├╝yor. max-height yakla┼č─▒m olduk├ža iyidir ancak gizleme a┼čamas─▒ i├žin iyi ├žal─▒┼čmaz - i├žeri─čin y├╝ksekli─čini bilmedi─činiz s├╝rece fark edilir bir gecikme olacakt─▒r.

Ben en iyi yolu kullanmak oldu─čunu d├╝┼č├╝n├╝yorum max-height ama sadece g├Âsteri a┼čamas─▒ i├žin . Ve saklanmas─▒nda herhangi bir animasyon kullanmamak. ├ço─ču durumda ├Ânemli olmamal─▒d─▒r.

max-height herhangi bir i├žeri─čin s─▒─čmas─▒ i├žin olduk├ža b├╝y├╝k bir de─čere ayarlanmal─▒d─▒r. Animasyon h─▒z─▒, transition s├╝re ( speed = max-height / duration ) ile kontrol edilebilir . H─▒z, i├žeri─čin boyutuna ba─čl─▒ de─čildir. ─░├žeri─čin tamam─▒n─▒ g├Âstermek i├žin ge├žen s├╝re boyutuna ba─čl─▒ olacakt─▒r.

 document.querySelector("button").addEventListener(
  "click", 
  function(){
    document.querySelector("div").classList.toggle("hide");
  }
) 
 div {    
    max-height: 20000px;
    transition: max-height 3000ms;
    overflow-y: hidden;
}

.hide {
    max-height: 0;
    transition: none;
} 
 <button>Toggle</button>
<div class="hide">Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. Lorem ipsum dolor sit amet, ius solet dignissim honestatis ad. Mea quem tibique intellegat te. Insolens deterruisset cum ea. Te omnes percipit consulatu eos. Vix novum primis salutatus no, eam denique sensibus et, his ipsum senserit ne. 
</div> 


2



─░lgili yay─▒nlar


Nas─▒l ba┼čvurulur? .Css () kullanarak ├Ânemli?

CSS kullanarak onay kutusu boyutunu de─či┼čtirebilir miyim?

CSS kullanarak birden fazla arka plan g├Âr├╝nt├╝s├╝ alabilir miyim?

Divs'imi sadece CSS kullanarak nas─▒l yeniden s─▒ralayabilirim?

iphone - uiimage y├╝ksekli─čini ve geni┼čli─čini nas─▒l alabilirim

Bir HTML kanvas─▒ndaki metnin y├╝ksekli─čini nas─▒l bulabilirsiniz?

Taray─▒c─▒ geni┼čli─či / y├╝ksekli─či de─či┼čtik├že bir resmi dinamik olarak CSS ile nas─▒l yeniden boyutland─▒rabilirim?

Css kullanarak herhangi bir elemente, elementin b├╝t├╝n geni┼čli─čine kenar-geni┼člik eklemeden kenarl─▒k nas─▒l verilir?

Saf CSS kullanarak nas─▒l bir ÔÇťipucu kuyru─čuÔÇŁ olu┼čturabilirim?

├ťst div'i doldurmak i├žin div y├╝ksekli─či nas─▒l uzat─▒l─▒r - CSS

Etiketle ilgili di─čer sorular [css]


HTML neden ÔÇťchucknorrisÔÇŁ in renkli oldu─čunu d├╝┼č├╝n├╝yor?

Neden ÔÇťnamespace std;ÔÇŁ kullanmak k├Ât├╝ uygulama olarak kabul edilir?

Kal─▒t─▒m yerine mi tercih edilmeli?

Git'i do─čru bir ┼čekilde nas─▒l zorlayabilirim?

JQuery kullanarak resim kayna─č─▒n─▒ de─či┼čtirme

C de boolean de─čerleri kullanma

Java'da == ve equals () aras─▒ndaki fark nedir?

C# Liste <string> s─▒n─▒rlay─▒c─▒l─▒ dizeye

Windows Forms Uygulamas─▒na uygulama ayarlar─▒ nas─▒l kaydedilir?

PostgreSQL: Metin ve varchar aras─▒ndaki fark (karakter de─či┼čkenli─či)