CSS如何根據

我與過渡使用用於創建手風琴動畫CSS如何根據

.ac-container input:not(:checked) ~ article.ac-small{ 
     background: rgba(255, 255, 255, 0.5); 
     margin-top: -1px; 
     overflow: hidden; 
     height: 0px!important; 
     position: relative; 
     z-index: 10; 
     transition:height 0.3s ease-in-out; 
    }

上面的代碼中的許多兒童設置元素的高度是指當部分被關閉的情況，但我想打開這一節我需要將它設置爲一個高度，但我不知道什麼是確切的高度，因爲它根據它包含的數組長度進行渲染。

我找到一個方法來做到這一點使用js代碼......

$('.ac-container .onCallUsersSection input:checked ~ article.ac-small').css({'height' : $ctrl.lstOnCallUsers.length * 73 + 'px', 'transition': 'height 0.3s ease-in-out'});

我怎麼能做到這一點在CSS，而不是在JS？

來源

2016-11-15 Ortal Blumenfeld Lagziel

我認爲沒有辦法，因爲CSS無法像這樣計算。也許你可以改變你的佈局，所以你不必設置一個特定的高度。 – Aytee

你可以設置.ac-small來溢出-y：scroll。這將允許你在ac-small中插入儘可能多的元素，並且仍然能夠看到所有元素。你只需要製作一個高度不高的.ac-small。有一種方法可以做你正在做的事情，但我認爲你需要玩最小高度/最大高度屬性。 –

就是這樣的情況，它包含一個現場示例變得更加有利。 – MassDebates

解決方法是使用max-height：0px！important;和max-height：230px;

.ac-container input:not(:checked) ~ article.ac-small{ 
     background: rgba(255, 255, 255, 0.5); 
     margin-top: -1px; 
     overflow: hidden; 
     max-height: 0px!important; 
     position: relative; 
     z-index: 10; 
     transition:max-height 0.3s ease-in-out; 
    } 

    .ac-container input:checked ~ article.ac-small{ 
     transition: max-height .3s ease-in-out; 
     max-height: 230px; 
    }

來源

2016-11-20 11:59:50

回答

相關問題