轉換爲摺疊

我正在處理自定義collapser，但我不知道如何在隱藏時進行轉換。
在線搜索我發現「display：none;」，但它不支持轉換。
我試過做高度：auto;然後height：0px;但它也不支持轉換。
轉換爲摺疊

下面的代碼：

HTML

<a class="clp" href="#clp-1"><div>Button</div></a> 
<div class="clp-body clp-show" id="clp-1">Lorem ipsum</div>

CSS

.clp > div { 
    border: 1px solid black; 
    border-radius: 3px; 
    width: 150px; 
    padding: 5px; 
} 

.clp { 
    text-decoration: none; 
    font-family: Verdana; 
    color: black; 
} 

.clp-body { 
    border: 1px solid black; 
    border-radius: 3px; 
    width: 150px; 
    padding: 5px; 
    margin-top: 5px; 
    transition: all 0.5s ease; 
} 

.clp-show { 
    opacity: 1; 
} 

.clp-show { 
    opacity: 0; 
    display: none; /* Only for the example */ 
}

JS（jQuery的）

$('a.clp').click(function(){ 
    var value = $(this).attr("href"); 
    if ($('div'+(value)).hasClass('clp-show')) { 
    $('div'+(value)).addClass('clp-hide'); 
    $('div'+(value)).removeClass('clp-show'); 
    } 
    else { 
    $('div'+(value)).removeClass('clp-hide'); 
    $('div'+(value)).addClass('clp-show'); 
    }; 
});

這裏是一個鏈接：https://codepen.io/Keyon/pen/937706ce73bc3f68cbeff6dd6faf6c87

來源

2017-04-07 Keyon

你想要什麼類型的轉變？您可能正在尋找jQuery的slideUp（）和slideDown（）函數。文檔[這裏]（http://api.jquery.com/slideup/）。 –

@JosephBeard我也已經嘗試過了，但它有一個奇怪的行爲[Codepen]（https://codepen.io/Keyon/pen/14b311941ee4b2e3973bcc6acd5949ee） – Keyon

看起來奇怪的行爲是由一起使用CSS轉換引起的與slideUp或slideDown。如果您從CSS中移除了「transition：all 0.5s ease;'，則滑動正常工作。 –

您可以使用jQuery的slideDown()和slideUp()和展開和摺疊您的DIV像這樣：

$('#clp-1').slideDown(); // expand 
$('#clp-1').slideUp(); // collapse

您還需要刪除CSS行transition: all 0.5s ease;，以便jQuery滑動以正常工作。

來源

2017-04-07 09:58:01

你什麼時候'效果基本show（）'＆'了slideDown（）'？檢查我的答案，它會給你最理想的方式來實現你的行爲。如果你真的想要去的jQuery的方式，那麼'＆'了slideDown（）'單獨使用'$ .toggle（）的''而不是效果基本show（）。理想的是使用CSS切換類和轉換 –

爲什麼不使用jquery的淡入淡出或幻燈片動畫，你可以使用動畫功能自己製作。

淡出：

$('div'+(value)).fadeIn(); 
$('div'+(value)).fadeOut();

幻燈：

$('div'+(value)).slideUp(); 
$('div'+(value)).slideDown();

要創建自己的動畫：

$('div' + (value)).animate({ 
     //some css propeties example: 
     margin-right: 500px 
    }, 5000, function() { 
    // Animation complete. 
    });

來源

2017-04-07 09:07:55 gwesseling

使用這些類的屬性可能是它的工作

.clp-show { 
 
    opacity: 1; 
 
    height:auto; 
 
    overflow:visible; 
 
} 
 

 
.clp-show { 
 
    opacity: 0; 
 
    height:0; 
 
    overflow:hidden; 
 
}

來源

2017-04-07 09:11:10 LKG

在height財產使用CSS動畫。

div #hidingDiv { 
    height: 50px 
    width: 50px 
} 
@keyframes shrinkup { 
    from { 
     height: 50px 
    } 
    to { 
     height: 0px 
    }

當你希望它消失：

document.getElementById("hidingDiv").setAttribute("style", "animation-name: shrinkup; animation-duration: 5s")

這只是設置上，當你運行JavaScript代碼的div動畫。

來源

2017-04-07 09:12:13 StellarDoor5319

我不想使用靜態的高度，這就是問題所在：/ – Keyon

您可以使用jQuery爲css屬性設置動畫效果。

$('a.clp').click(function() { 
    var value = $(this).attr("href"); 
    var targetDiv = $('div' + (value)); 
    targetDiv.toggleClass('clp-show'); 
    if (targetDiv.hasClass('clp-show')) { 
     targetDiv.css('display', 'block'); 
     targetDiv.animate({ 
     opacity: 1 
     }, 500); 

    } else { 
     targetDiv.animate({ 
     opacity: 0 
     }, 500, function() { 
     // This will be executed when the animation is complete 
     targetDiv.css('display', 'none'); 
     }); 
    } 
});

這裏是更新的codepen。我也對CSS做了一些改動。通過這種方式，我們確保它的動畫效果很好，然後在轉換完成時就會消失。否則，它可能會阻止一些鼠標事件並影響其他元素。

UPDATE

這裏是jQuery的用於摺疊（codepen）：

$('a.clp').click(function() { 
    var value = $(this).attr("href"); 
    var targetDiv = $('div' + (value)); 
    targetDiv.toggleClass('clp-show'); 
    targetDiv.slideToggle(500); 
});

你不需要類在這裏切換，但我離開的情況下，要更改其他的CSS屬性。

來源

2017-04-07 09:38:34

好，這很好，但做你知道如何使用「崩潰動畫」？而不是使用不透明度，使用像高度的東西。 – Keyon

另外，請考慮在codepen的css更改。 –

轉型的高度不起作用，則需要使用最大高度。使用下面的CSS。

.clp-body { 
    max-height: 0; /* set the initial height to 0 */ 
    transition: max-height .5s ease-in; /* define the transition */ 
} 
.clp-show { 
    max-height: 1000px; /* set it to some high value but it will not expand more than the content height */ 
}

切換clp-show類的.clp

$(".clp").on("click", function() { 
    $(".clp-body").toggleClass("clp-show"); 
});

編輯點擊：你不需要display:none，因爲我們設置max-height: 0最初

來源

2017-04-07 09:57:33

這應該是公認的答案 –

回答

相關問題