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';
}

} 函数 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>

点击

这是一个演示我的问题的小提琴 My Fiddle

Answer 1

只需在css中将高度改为固定高度即可：

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

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

更新：另一种方法是使用 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/

如何从屏幕底部为 Div 设置动画

1 个答案: