css text? what - كيف يمكنني نقل الارتفاع: 0 ؛ لارتفاع: السيارات. باستخدام CSS؟




15 Answers

استخدم 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>

property is

أحاول أن أنزل <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>




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




يمكنك ، مع القليل من 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 .




يتمثل الحل البصري لتحريك الارتفاع باستخدام تحويلات 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)




تعمل الإجابة المقبولة لمعظم الحالات ، لكنها لا تعمل بشكل جيد عندما 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>




لا قيم مشفرة الثابت.

لا جافا سكريبت.

لا تقريب.

الحيلة هي استخدام مخفي & مكرر divللحصول على المتصفح لفهم ما يعني 100٪.

هذه الطريقة مناسبة عندما تكون قادرًا على نسخ DOM للعنصر الذي ترغب في تحريكه.

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




عندما أنشر هذا يوجد أكثر من 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>




تعديل: انتقل لأسفل للحصول على إجابة محدثة
كنت أصنع قائمة منسدلة وشاهدت هذه المشاركة ... العديد من الأجوبة المختلفة ولكنني قررت مشاركة قائمة منسدلة أيضًا ، ... إنها ليست مثالية ولكن على الأقل ستستخدم 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
نأمل أن يجد شخص ما هذا مفيدًا في المستقبل.




أعتقد أنني توصلت إلى حل قوي بالفعل

حسنا!أعلم أن هذه المشكلة قديمة قدم الإنترنت ، لكنني أعتقد أن لديّ حلًا تحولت إلى ملحق يسمى "الانتقال الطافر" . يقوم حلّي بتعيين style=""السمات للعناصر المتتبعة متى كان هناك تغيير في DOM. والنتيجة النهائية هي أنه يمكنك استخدام لغة الترميز القابلة للامتداد جيد لمراحل انتقالك وعدم استخدام الإصلاحات المتسللة أو javascript الخاص. الشيء الوحيد الذي عليك فعله هو تعيين ما تريد تتبعه على العنصر المعني باستخدام data-mutant-attributes="X".

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

هذا هو! يستخدم هذا الحل MutationObserver لمتابعة التغييرات في DOM. ولهذا السبب ، لا يتعين عليك إعداد أي شيء أو استخدام جافا سكريبت لتحريك الأشياء يدويًا. يتم تعقب التغييرات تلقائيا. ومع ذلك ، نظرًا لأنه يستخدم MutationObserver ، فسيتم نقل هذا في IE11 + فقط.

الحيل!




إليك طريقة للانتقال من أي ارتفاع يبدأ ، بما في ذلك 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);



أدرك أن هذا الموضوع قديم ، ولكنه يحتل مرتبة عالية في بعض عمليات بحث 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/




لقد تم مؤخرا الانتقال إلى 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




اضبط الارتفاع على تلقائي وقم بتحويل الارتفاع الأقصى.

تم اختباره على Chrome v17

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}



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

.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 عند النقر على الأكورديون. يمكن القيام بذلك من خلال أزرار الراديو المخفية ، لكنني لم أركز على ذلك ، فقط تحول الارتفاع.



Related