vertically - what css property is used to bold text?




كيف يمكنني نقل الارتفاع: 0 ؛ لارتفاع: السيارات. باستخدام CSS؟ (20)

أحاول أن أنزل <ul> إلى أسفل باستخدام انتقالات CSS.

يبدأ <ul> عند height: 0; . عند التمرير ، يتم تعيين height:auto; إلى height:auto; . ومع ذلك ، فإن هذا يؤدي إلى الظهور ببساطة ، وليس الانتقال ،

إذا قمت بذلك من height: 40px; height: auto; ، ثم ستنزلق إلى height: 0; ، ثم القفز فجأة إلى الارتفاع الصحيح.

كيف يمكنني القيام بذلك دون استخدام JavaScript؟

#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>


أعلم أن هذا هو الجواب رقم واحد وثلاثون لهذا السؤال ، ولكن أعتقد أنه يستحق كل هذا العناء ، لذلك هنا يذهب. هذا هو الحل CSS فقط مع الخصائص التالية:

  • لا يوجد تأخير في البداية ، ولا يتوقف الانتقال في وقت مبكر. في كلا الاتجاهين (التوسعة والانهيار) ، إذا حددت مدة انتقال تبلغ 300 مللي ثانية في CSS ، فإن عملية النقل تستغرق 300 مللي ثانية.
  • إنه يقوم transform: scaleY(0) الارتفاع الفعلي (على عكس transform: scaleY(0) ) ، لذلك يفعل الشيء الصحيح إذا كان هناك محتوى بعد العنصر القابل للطي.
  • بينما (كما في الحلول الأخرى) هناك أرقام سحرية (مثل "اختيار طول أعلى من المربع الخاص بك سيكون") ، ليس قاتلاً إذا انتهى افتراضك بأنه خطأ. قد لا يبدو الانتقال مدهشًا في هذه الحالة ، ولكن قبل الانتقال وبعده ، هذه ليست مشكلة: في حالة ( height: auto ) الموسع ، يكون المحتوى بأكمله دائمًا على ارتفاع صحيح (على سبيل المثال ، إذا اخترت max-height الذي يبدو منخفضًا جدًا). وفي الحالة المصغرة ، يكون الارتفاع صفراً كما ينبغي.

عرض

إليك عرضًا توضيحيًا يحتوي على ثلاثة عناصر قابلة للطي ، كل الارتفاعات المختلفة ، والتي تستخدم جميعها نفس CSS. قد ترغب في النقر فوق "صفحة كاملة" بعد النقر فوق "تشغيل مقتطف". تجدر الإشارة إلى أن جافا سكريبت لا يقوم إلا بتعديل فئة CSS collapsed ، وليس هناك أي قياس. (يمكنك القيام بهذا العرض التوضيحي الدقيق دون أي JavaScript على الإطلاق باستخدام مربع اختيار أو :target ). لاحظ أيضًا أن جزء CSS الذي يتحمل مسؤولية الانتقال قصير جدًا ، ولا يتطلب HTML سوى عنصر مجمّع إضافي واحد.

$(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>

كيف يعمل؟

هناك في الواقع تحويلين ينطويان على تحقيق ذلك. يقوم أحدهم -2000px margin-bottom من 0px (في الحالة الموسعة) إلى -2000px في -2000px (على غرار هذه الإجابة ). إن 2000 هنا هو أول رقم سحري ، وهو يعتمد على افتراض أن الصندوق الخاص بك لن يكون أعلى من هذا (يبدو 2000 بكسل كخيار معقول).

إن استخدام الانتقال margin-bottom وحده بمفرده له مسألتين:

  • إذا كان لديك بالفعل مربع أعلى من 2000 بكسل ، فحينئذٍ لن يكون هناك أي margin-bottom: -2000px لن تخفي كل شيء - ستكون هناك أشياء مرئية حتى في الحالة margin-bottom: -2000px . هذا إصلاح ثانوي سنقوم به لاحقًا.
  • إذا كان المربع الفعلي هو ، على سبيل المثال ، 1000 بكسل مرتفعًا ، وكان طول مدة الانتقال 300 سم ، فإن الانتقال المرئي قد انتهى بالفعل بعد حوالي 150 مللي ثانية (أو ، في الاتجاه المعاكس ، يبدأ 150 ثانية متأخرة).

إصلاح هذه المشكلة الثانية هو المكان الذي يأتي فيه الانتقال الثاني ، ويستهدف هذا التحول المفهوم الحد الأدنى للارتفاع للمجمع ("من الناحية المفاهيمية" لأننا لا نستخدم بالفعل الحد min-height لهذا ؛ المزيد في ذلك لاحقًا).

إليك رسمًا متحركًا يوضح كيف أن الجمع بين انتقال الهامش السفلي مع الحد الأدنى من انتقال الارتفاع ، سواء على المدى المتساوي ، يعطينا انتقالًا مشتركًا من الارتفاع الكامل إلى ارتفاع صفري له نفس المدة.

يظهر الشريط الأيسر كيف يدفع الهامش السفلي السلبي القاع لأعلى ، مما يقلل من الارتفاع المرئي. يوضح الشريط الأوسط كيف يضمن الحد الأدنى للارتفاع أن في حالة الانهيار ، لا ينتهي الانتقال مبكرًا ، وفي حالة التوسيع ، لا يبدأ النقل في وقت متأخر. يوضح الشريط الأيمن كيف يؤدي الجمع بين الاثنين إلى تحويل المربع من ارتفاع كامل إلى ارتفاع صفري في المدة الزمنية الصحيحة.

بالنسبة إلى العرض التوضيحي الخاص بي ، استقرت على 50 بكسل كحد أدنى لقيمة الارتفاع الأدنى. هذا هو الرقم السحري الثاني ، ويجب أن يكون أقل من "الارتفاع". 50 بكسل يبدو معقولا أيضا. يبدو من غير المحتمل أنك ترغب في كثير من الأحيان في جعل عنصر قابل للطي لا يبلغ ارتفاعه حتى 50 بكسل في المقام الأول.

كما ترى في الرسم المتحرك ، فإن الانتقال الناتج يكون مستمرًا ، ولكنه ليس قابلاً للتفرقة - في اللحظة التي يكون فيها الحد الأدنى للارتفاع مساويًا للارتفاع الكامل الذي تم تعديله بواسطة الهامش السفلي ، هناك تغيير مفاجئ في السرعة. هذا ملحوظ جدا في الرسوم المتحركة لأنه يستخدم وظيفة توقيت خطي لكل من التحولات ، ولأن الانتقال كله بطيء جدا. في الحالة الفعلية (العرض التوضيحي الخاص بي في الأعلى) ، يستغرق الانتقال 300 مللي ثانية فقط ، ولا يكون انتقال الهامش السفلي خطيًا. لقد لعبت حولها مع الكثير من وظائف توقيت مختلفة لكل من التحولات ، والأخرى التي انتهى بها الأمر شعرت أنها تعمل على أفضل وجه من أجل أوسع مجموعة من الحالات.

تبقى مشكلتين لإصلاح:

  1. النقطة من الأعلى ، حيث لا يتم إخفاء مربعات يزيد ارتفاعها عن 2000 بكسل تمامًا في الحالة المصغرة ،
  2. والمشكلة العكسية ، حيث تكون الحالة في حالة غير مخفية ، تكون الصناديق التي يقل ارتفاعها عن 50 بكسل عالية جدًا حتى عند عدم تشغيل النقل ، لأن الحد الأدنى للارتفاع يبقيها عند 50 بكسل.

نحل المشكلة الأولى عن طريق إعطاء عنصر الحاوية max-height: 0 في الحالة 0s 0.3s ، مع انتقال 0s 0.3s . وهذا يعني أنه ليس انتقالًا بالفعل ، ولكن يتم تطبيق max-height مع تأخير ؛ ينطبق فقط عندما ينتهي الانتقال. لكي يعمل هذا بشكل صحيح ، نحتاج أيضًا إلى اختيار max-height رقمي للعكس ، غير المنهارة ، الحالة. ولكن بخلاف حالة 2000px ، حيث يؤثر اختيار عدد كبير جدًا من العدد على جودة الانتقال ، في هذه الحالة ، لا يهم فعلًا. لذا يمكننا فقط اختيار رقم مرتفع جدًا بحيث نعرف أنه لن يقترب ارتفاع من هذا. اخترت مليون بكسل. إذا كنت تشعر أنك قد تحتاج إلى دعم محتوى يبلغ ارتفاعه أكثر من مليون بكسل ، فحينئذٍ 1) أنا آسف ، و 2) فقط أضف عددًا من الأصفار.

المشكلة الثانية هي السبب في أننا لا نستخدم بالفعل الحد الأدنى للارتفاع في الحد الأدنى للارتفاع. بدلاً من ذلك ، يوجد ::after pseudo-element في الحاوية ذات height ينتقل من 50 بكسل إلى صفر. هذا له نفس التأثير مثل الحد min-height : لن يسمح للحاويات بالانكماش تحت أي ارتفاع قد يكون العنصر الزائف في الوقت الحالي. ولكن نظرًا لأننا نستخدم height ، وليس أقل min-height ، فيمكننا الآن استخدام max-height (مرة أخرى مع تأخير) لضبط الارتفاع الفعلي للعنصر الزائفة إلى الصفر بمجرد انتهاء النقل ، مما يضمن على الأقل خارج الانتقال ، حتى العناصر الصغيرة لديها الارتفاع الصحيح. نظرًا لأن الحد min-height stronger من max-height ، فلن ينجح ذلك إذا استخدمنا ارتفاع الحاوية min-height بدلاً من height العنصر الزائف. تمامًا مثل max-height في الفقرة السابقة ، يحتاج max-height هذا أيضًا إلى قيمة للنهاية المعاكسة للانتقال. ولكن في هذه الحالة ، يمكننا اختيار 50 بكسل فقط.

تم اختباره في Chrome (Win ، و Mac ، و Android ، و iOS) ، و Firefox (Win ، و Mac ، و Android) ، و Edge ، و IE11 (باستثناء مشكلة في تخطيط flexbox مع العرض التوضيحي الذي لم أكن أزعجه أثناء التصحيح) ، و Safari (Mac ، iOS) ). عند التحدث عن فليكس بوكس ​​، يجب أن يكون من الممكن القيام بهذا العمل دون استخدام أي صندوق مرن. في الواقع ، أعتقد أنه يمكنك عمل كل شيء تقريبا في IE7 - باستثناء حقيقة أنه لن يكون لديك تحويلات CSS ، مما يجعلها ممارسة لا معنى لها.


استخدم max-height في التحويل وليس height . وتعيين قيمة على max-height لشيء أكبر من المربع الخاص بك سوف تحصل من أي وقت مضى.

شاهد عرض JSFiddle المقدم من كريس جوردان في answer أخرى هنا.

#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>


لا يمكنك حاليًا تحريك الارتفاع عندما تكون إحدى المرتفعات المعنية auto ، يجب عليك تعيين مرتفعين صريحين.


يتمثل الحل البصري لتحريك الارتفاع باستخدام تحويلات CSS3 في تحريك الحشو بدلاً من ذلك.

لا يمكنك الحصول على تأثير المسح بالكامل ، ولكن الالتفاف مع مدة الانتقال وقيم الحشو يجب أن تجعلك قريبًا بما فيه الكفاية. إذا كنت لا تريد تحديد ارتفاع / أقصى ارتفاع ، فيجب أن يكون هذا ما تبحث عنه.

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's أعلاه jsFiddle)


يجب عليك استخدام scale بدلاً من ذلك.

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/ وغيرت jsfiddle لديك لاستخدام scale Y بدلاً من الارتفاع ، http://jsfiddle.net/dotnetCarpenter/7cnfc/206/ .


يمكنك ، مع القليل من jiggery-pokery غير الدلالي. طريقي المعتاد هو تحريك ارتفاع DIV الخارجي الذي لديه طفل واحد وهو نمط DIV أقل يستخدم فقط لقياس ارتفاع المحتوى.

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>

يود المرء فقط أن يكون قادرا على الاستغناء عن .measuringWrapper وأن يضبط ارتفاع DIV تلقائياً .measuringWrapper هذه .measuringWrapper ، ولكن هذا لا يبدو .measuringWrapper (يتم تعيين الارتفاع ، لكن لا يحدث أي رسم متحرك).

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>

تفسيري هو أن الارتفاع الواضح مطلوب لتشغيل الرسوم المتحركة. لا يمكنك الحصول على رسم متحرك على ارتفاع عندما يكون الارتفاع (ارتفاع البداية أو النهاية) هو auto .


حل Flexbox

الايجابيات:

  • بسيط
  • لا JS
  • الانتقال السلس

سلبيات:

  • يجب وضع العنصر في حاوية مرنة بطول ثابت

والطريقة التي تعمل بها هي دائمًا وجود أساس مرن: تلقائيًا على العنصر الذي يحتوي على المحتوى ، وانتقل إلى النمو المرن والمرونة - الانكماش بدلاً من ذلك.

تحرير: تحسين JS Fiddle مستوحاة من واجهة Xbox One.

* {
  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>

شبيبة كمان


أدرك أن هذا الموضوع قديم ، ولكنه يحتل مرتبة عالية في بعض عمليات بحث Google ولذلك أجد أنه يستحق التحديث.

أنت أيضا مجرد الحصول على / ضبط ارتفاع العنصر نفسه:

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

يجب عليك تفريغ هذه Javascript مباشرةً بعد علامة إغلاق target_box في علامة نصي مضمنة.


عند التوسع في الإجابة على @ jake ، فإن الانتقال سيصل إلى أقصى قيمة للارتفاع ، مما يؤدي إلى حركة سريعة للغاية - إذا قمت بتعيين الانتقالات لكل من: التمرير والإيقاف يمكنك التحكم في السرعة المجنونة أكثر قليلاً.

لذا ، فإن li: hover هو عندما يدخل الماوس إلى الحالة ، ثم يكون الانتقال على الخاصية غير المحجوزة هو إجازة الماوس.

نأمل أن يكون هذا بعض المساعدة.

على سبيل المثال:

.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 */

وهنا كمان: http://jsfiddle.net/BukwJ/


كانت إجابة جيك لتحريك الارتفاع الأقصى أمرًا رائعًا ، ولكنني وجدت التأخير ناتجًا عن تعيين حد أقصى كبير للإزعاج.

يمكن للمرء أن يحرك المحتوى القابل للطي إلى div داخلي ويحسب الارتفاع الأقصى من خلال الحصول على ارتفاع div الداخلي (عبر JQuery فإنه سيكون الخارجي Height ()).

$('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');
});

إليك رابط jsfiddle: http://jsfiddle.net/pbatey/duZpT

إليك jsfiddle مع الحد الأدنى المطلق من الشفرة المطلوبة: http://jsfiddle.net/8ncjjxh8/


لم أقرأ كل شيء بالتفصيل ولكني واجهت هذه المشكلة مؤخرًا ، وقد فعلت ما يلي:

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;
}

يتيح لك هذا الحصول على قسم يعرض في البداية محتوى يصل ارتفاعه إلى 200 بكسل ويصبح حجمه مرتفعاً على الأقل كمحتوى محتوى div بالكامل. لا تصبح Div 3000 بكسل ، لكن 3000 بكسل هو الحد الذي أفرضه. تأكد من أن يكون النقل على non: hover ، وإلا قد تحصل على بعض التقديم الغريب. بهذه الطريقة ، يرث hover من لا: hover.

لا يعمل النقل على شكل px إلى٪ أو إلى auto. تحتاج إلى استخدام نفس وحدة القياس. هذا يفي بالغرض بالنسبة لي. استخدام HTML5 يجعلها مثالية ....

تذكر أن هناك دائما عمل حول ... ؛ )

أملي أن يجد هذا نفعا


هذه مشكلة عادية لقد حلت مثل هذا

http://jsfiddle.net/ipeshev/d1dfr0jz/

حاول تعيين تأخير الحالة المغلقة إلى بعض الرقم السالب واللعب قليلاً مع القيمة. سترى الفرق. ويمكن أن يكون تقريبا تكذب العين البشرية ؛).

وهي تعمل في المتصفحات الرئيسية ، ولكنها جيدة بما فيه الكفاية بالنسبة لي. إنه أمر غريب لكنه يعطي بعض النتائج.

.expandable {
    max-height: 0px;
    overflow: hidden;
    transition: all 1s linear -0.8s;
}

button:hover ~ .expandable {
    max-height: 9000px;
    transition: all 1s ease-in-out;
}

إليك طريقة للانتقال من أي ارتفاع يبدأ ، بما في ذلك 0 ، إلى تلقائي (بالحجم الكامل والمرونة) دون الحاجة إلى شفرة ثابتة على أساس كل عقدة أو أي رمز مستخدم لتهيئة: https://github.com/csuwildcat/transition-auto . هذا هو أساسا الكأس المقدسة على ما تريد ، وأعتقد -> http://codepen.io/csuwldcat/pen/kwsdF . ما عليك سوى النقر على ملف JS التالي إلى صفحتك ، وكل ما عليك فعله بعد ذلك هو إضافة / إزالة سمة منطقية واحدة - reveal=""- من العقد التي تريد توسيعها والتقلص.

في ما يلي كل ما يلزمك فعله كمستخدم ، بعد تضمين شفرة التعليمة البرمجية الموجودة أسفل رمز المثال:

/*** 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>

في ما يلي قالب التعليمة البرمجية المراد تضمينه في صفحتك ، وبعد ذلك ، يكون المرق بأكمله:

قم بإسقاط ملف JS هذا في صفحتك - كل ذلك Just Works ™

/ * رمز الارتفاع: auto؛ الانتقال * /

(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 * /

    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);

استخدام max-heightمع تخفيف انتقال مختلف وتأخير لكل ولاية.

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;
}

انظر على سبيل المثال: http://jsfiddle.net/0hnjehjc/1/


تعديل: انتقل لأسفل للحصول على إجابة محدثة
كنت أصنع قائمة منسدلة وشاهدت هذه المشاركة ... العديد من الأجوبة المختلفة ولكنني قررت مشاركة قائمة منسدلة أيضًا ، ... إنها ليست مثالية ولكن على الأقل ستستخدم css فقط اسقاط! كنت أستخدم التحويل: translateY (y) لتحويل القائمة إلى العرض ...
يمكنك رؤية المزيد في الاختبار
http://jsfiddle.net/BVEpc/4/
لقد وضعت div خلف كل لي لأن القائمة المنسدلة تأتي من أعلى ولإظهارها بشكل صحيح كان هذا مطلوبًا ، ورمز div هو:

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

ويتم التمرير:

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

ونظرًا لأن ارتفاع ul تم تعيينه على المحتوى ، فيمكنه الحصول على محتوى جسمك هذا هو السبب في أنني فعلت ذلك من أجل ul:

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

و تحوم:

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

المرة الثانية بعد الإنتهاء من التأخير وستحصل على مخفي بعد إغلاق قائمة منسدلة بشكل متحرك ... أتمنى
لاحقًا أن يستفيد شخص ما من هذا.

تحرير: أنا لا أستطيع أن أصدق ppl فعلا باستخدام هذا النموذج الأولي! هذه القائمة المنسدلة هي فقط لقائمة فرعية واحدة وهذا كل شيء! لقد قمت بتحديث واحد أفضل يمكن أن يكون اثنين من القائمة الفرعية لكل من الاتجاه ltr و rtl مع دعم IE 8.
Fiddle for LTR
Fiddle for RTL
نأمل أن يجد شخص ما هذا مفيدًا في المستقبل.


تعمل الإجابة المقبولة لمعظم الحالات ، لكنها لا تعمل بشكل جيد عندما divيتغير اختلافًا كبيرًا في الارتفاع - لا تعتمد سرعة الرسوم المتحركة على الارتفاع الفعلي للمحتوى ، وقد تبدو متقطعة.

لا يزال بإمكانك تنفيذ الرسوم المتحركة الفعلية باستخدام CSS ، ولكنك تحتاج إلى استخدام جافا سكريبت لحساب ارتفاع العناصر ، بدلاً من محاولة استخدامها auto. لا يلزم وجود jQuery ، على الرغم من أنه قد يتعين عليك تعديل هذا الشيء قليلاً إذا كنت تريد التوافق (يعمل في أحدث إصدار من Chrome :)).

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>


عندما أنشر هذا يوجد أكثر من 30 إجابة بالفعل ، لكنني أشعر أن إجابتي تتحسن على الإجابة المقبولة من قبل جيك.

لم أكن راضيًا عن المشكلة التي تنشأ من استخدام max-heightالتحولات ببساطة و CSS3 ، نظرًا لأن العديد من المعلقين لاحظوا ذلك ، يجب عليك تعيين max-heightالقيمة قريبة جدًا من الارتفاع الفعلي أو ستحصل على تأخير. انظر JSFiddle للحصول على مثال لهذه المشكلة.

للتغلب على هذا (مع الاستمرار في عدم استخدام جافا سكريبت) ، أضفت عنصر HTML آخر transform: translateYينقل قيمة CSS.

وهذا يعني على حد سواء max-heightو translateYتستخدم: max-heightيسمح عنصر لدفع أسفل العناصر الواردة أدناه، في حين translateYيعطي تأثير "لحظة" نريد. القضية max-heightلا تزال موجودة ، ولكن يتم تقليل تأثيره. وهذا يعني أنه يمكنك تعيين ارتفاع أكبر لقيمتك max-heightوالقلق بشأنه أقل.

وتتمثل الفائدة العامة في أنه عند الانتقال مرة أخرى (في حالة الانهيار) ، يرى المستخدم translateYالرسوم المتحركة على الفور ، لذا لا يهم كم من الوقت max-heightيستغرق ذلك.

الحل كما كمان

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>


كان هناك القليل من الإشارة إلى Element.scrollHeightالخاصية التي يمكن أن تكون مفيدة هنا ويمكن استخدامها مع انتقال CSS خالص. تحتوي الخاصية دائمًا على الارتفاع "الكامل" لعنصر ، بصرف النظر عما إذا كان المحتوى الخاص به يتدفق كنتيجة للارتفاع المنهار (على سبيل المثال height: 0) أم لا.

على هذا النحو ، بالنسبة لعنصر height: 0(فعال تمامًا) ، فإن ارتفاعه "الطبيعي" أو "الكامل" لا يزال متاحًا بسهولة من خلال scrollHeightقيمته ( طول البكسل دائمًا ).

بالنسبة لمثل هذا العنصر ، بافتراض أنه قد تم بالفعل إعداد النقل مثل على سبيل المثال (استخدام ulحسب السؤال الأصلي):

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

يمكننا تشغيل "توسع" الرسوم المتحركة المرغوب فيه ، باستخدام CSS فقط ، مع شيء مثل ما يلي (هنا على افتراض أن ulالمتغير يشير إلى القائمة):

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

هذا هو. إذا كنت بحاجة إلى طي القائمة ، فسيتم تنفيذ أي من الجملتين التاليتين:

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

تمحورت حالة الاستخدام الخاصة بي حول قوائم الرسوم المتحركة ذات الأطوال غير المعروفة والتي غالباً ما تكون طويلة ، لذلك لم أكن مرتاحًا في تسوية محتوى "قصي بما فيه الكفاية" heightأو max-heightمواصفات ومخاطر القطع التي تحتاج فجأة إلى التمرير (إذا overflow: auto، على سبيل المثال) . بالإضافة إلى ذلك ، يتم تقليل التسهيل والتوقيت باستخدام max-heightالحلول القائمة على أساس ، لأن الارتفاع المستخدم قد يصل إلى أقصى قيمة له في وقت أقرب مما يتطلبه max-heightالوصول إليه 9999px. ومع نمو دقة الشاشة ، فإن أطوال البكسل تشبه 9999pxطعمًا سيئًا في فمي. هذا الحل الخاص يحل المشكلة بطريقة أنيقة ، في رأيي.

وأخيرًا ، نأمل في أن تنقح المراجعات المستقبلية لعناوين المؤلفين من عناوين CSS الحاجة إلى القيام بهذا النوع من الأشياء بشكل أكثر أناقة - إعادة النظر في مفهوم القيم "المحسوبة" مقابل "المستخدمة" و "المحسّنة" ، والنظر فيما إذا كان يجب تطبيق التحويلات على القيم ، بما في ذلك التحولات مع widthو height(التي تحصل في الوقت الحالي على القليل من معاملة خاصة).


لقد تم مؤخرا الانتقال إلى max-heightعلى liالعناصر بدلا من التفاف ul.

المنطق هو أن تأخير للمشاريع الصغيرة max-heightsهو أبعد ما يكون أقل بشكل ملحوظ (على كل حال) مقارنة كبيرة max-heights، ويمكنني أيضا تعيين بلدي max-heightقيمة بالنسبة إلى font-sizeمن liبدلا من بعض عدد كبير التعسفي باستخدام emsأو rems.

إذا كان حجم الخط الخاص بي 1rem، فسوف أقوم بضبط max-heightشيء ما 3rem(لاستيعاب النص المغلف). يمكنك الاطلاع على مثال هنا:

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


هذا ليس بالضبط "حل" للمشكلة ، ولكن أكثر من الحل. انها تعمل فقط كما هو مكتوب مع النص ، ولكن يمكن تغييرها للعمل مع عناصر أخرى حسب الحاجة أنا متأكد.

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

إليك مثال على ذلك: http://codepen.io/overthemike/pen/wzjRKa

بشكل أساسي ، تقوم بتعيين حجم الخط إلى 0 والانتقال بدلاً من الارتفاع ، أو الحد الأقصى للارتفاع ، أو المقياس Y () إلخ بوتيرة سريعة بما يكفي لتحويل الارتفاع إلى ما تريده. لتحويل الارتفاع الفعلي مع CSS إلى تلقائي ليس ممكنًا حاليًا ، ولكن تحويل المحتوى داخل ، هو بالتالي انتقال حجم الخط.

  • ملاحظة - هناك javascript في codepen ، ولكن الغرض الوحيد هو إضافة / إزالة دروس css عند النقر على الأكورديون. يمكن القيام بذلك من خلال أزرار الراديو المخفية ، لكنني لم أركز على ذلك ، فقط تحول الارتفاع.






css-transitions