如何從屏幕底部動畫 Div

Question

我有一個從右側打開的 div。 目前它從字面上從頁面頂部開始並“移動”到底部。 我想從右下角動畫它，而不是從上到下。

這是我的CSS：

.helper {
width: 0px;
position: fixed;
bottom: 60px;
right: -10px;
background-color: #E3E7EA;
overflow-x: auto;
overflow-y: scroll;
transition: 0.5s;
padding-left: 10px;
z-index: 1000;
transition: all 0.4s ease 0s;

}

這是我的javascript：

function openHelper() {
var myBoxWidth = $("#myHelper").width();
if (myBoxWidth > 0) {
    document.getElementById("myHelper").style.width = "0px";
    document.getElementById("myHelper").style.right = '-10';
}
else {
    document.getElementById("myHelper").style.width = "520px";
    document.getElementById("myHelper").style.right = '0';
}

} function closeHelper() { document.getElementById("myHelper").style.width = "0px"; document.getElementById("myHelper").style.right = '-10'; }

這是我的 HTML：

<div id="myHelper" class="helper">
<span><a href="javascript:void(0)" class="closebtn" onclick="closeHelper()">X</a></span>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

點擊

這是一個演示我的問題的小提琴 我的小提琴

Answer 1

只需將高度更改為 css 中的固定高度：

.helper {
    width: 0px;
    height: 300px;
    etc
}

就是這樣！ 這是相同的 JSFiddle： https ://jsfiddle.net/dbrsgevf/3/

UPD：另一種方法是使用 max-height。

.helper {
    width: 0px;
    max-height: 200px;
    etc
}

同樣的 JSFiddle： https ://jsfiddle.net/9o2g4e5x/

另一種選擇是使用 max-height 限制大小，並使用 javascript 來編輯這些限制。 這給了它一個增長的效果：

JS：

function openHelper() {
    var myBoxWidth = $("#myHelper").width();
    if (myBoxWidth > 0) {
        document.getElementById("myHelper").style.width = "0px";
        document.getElementById("myHelper").style.right = '-10';
        document.getElementById("myHelper").style.maxHeight = "0px";
    }
    else {
        document.getElementById("myHelper").style.width = "520px";
        document.getElementById("myHelper").style.right = '0';
        document.getElementById("myHelper").style.maxHeight = "190px";
    }
}
function closeHelper() {
    document.getElementById("myHelper").style.width = "0px";
    document.getElementById("myHelper").style.right = '-10';
    document.getElementById("myHelper").style.maxHeight = "0px";
}

CSS：

.helper {
    width: 0px;
    max-height: 0px;
}

JSFiddle： https ://jsfiddle.net/9o2g4e5x/2/