自動可縮放（高度和寬度）動畫水平手風琴

Question

經過數小時的水平手風琴各種JScript和CSS3版本的學習之后，我正在尋找的東西很難找到。

基本上，我們付費使用許多Telerik控件，在一個特定的頁面上，我有3個RadGrid和一個RadHTMLBarChart，如果願意，我希望在4個單獨的面板中顯示。

我真正想要顯示的方式是在“水平手風琴”中顯示，但考慮到內容主要是動態的，即給定保存的記錄數量或寬度可以調整radgrid的高度可以調整radgrid圖表取決於顯示固定寬度版本的列數實際上是行不通的...

那么，有人知道我可以在我的項目中使用這種水平手風琴的任何合適版本嗎？

JS或CSS3我都不介意...

提前致謝！ 亞當。

Answer 1

使用CSS3可以實現水平手風琴，這是一個警告，您需要使用CSS預編譯器，例如LESS或SASS（我在這里使用LESS）。

它需要有趣地使用無序列表<ul> ， <label> s和<input>單選按鈕。

@slideWidth: 3%;
@totalWidth: 100%;

.slider(@slides) {
    input[type="radio"]:checked ~ .accslide {
        width: @totalWidth * ((@totalWidth - (@slideWidth * @slides)) / 100);
    }
}

上面定義的“ class” .slider（@slides）使用每個幻燈片分隔符的寬度（表示為3％寬度）來計算相對於屏幕的幻燈片部分的正確尺寸（表示為100％寬度）。

“類” .accslide是實際的“幻燈片部分”，可以作為“ 常規同級 ”來訪問。

這是Codepen中一些有效的LESS。

為了處理手風琴的動畫，每個“ accslide”都使用另一個名為“ .transitionArgs（@arguments）”的LESS“類”，它被稱為“ mixin”，這使您可以處理瀏覽器的交叉兼容性。

.transitionArgs(@arguments) {
    -webkit-transition: @arguments;
    -moz-transition: @arguments;
    -ms-transition: @arguments;
    -o-transition: @arguments;
    transition: @arguments;
}

如果你有任何問題隨時問。