javascript - 为 div 可见性使用过渡

Question

到目前为止，这是我已经完成的:

function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()
    var body = document.body
    var docElem = document.documentElement
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0
    var top = box.top + scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft
    return { top: Math.round(top), left: Math.round(left) }
}
function getOffsetSum(elem) {
    var box = elem.getBoundingClientRect()
    var body = document.body
    var docElem = document.documentElement
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0
    var top = box.top + scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft
    return { top: Math.round(top), left: Math.round(left) }
}
function getOffset(elem) {
    if (elem.getBoundingClientRect) {
    var regdiv = document.getElementById("register");
    var button = document.getElementById("regbtn");
    var a = getOffsetRect(elem);
    var top = parseInt(a.top);
    var bheight = button.style.height;
    var top_ = top + bheight;
    regdiv.style.top = top_ + "px";
    regdiv.style.left = a.left + "px";
    return a;
    } else { // old browser
        var a = getOffsetSum(elem);
        //window.alert("1\nTop:" + a.top + "\nLeft: " + a.left);
        var regdiv = document.getElementById("register");
        regdiv.style.top = a.top + "px";
        regdiv.style.left = a.left + "px";
        return a;
    }
}
function CloseRegister(elem) {
    var regdiv = document.getElementById("register");
    var button = document.getElementById("regbtn");
    if (register.style.display == 'none') {
        getOffset(button);
        register.classList.remove('hidden');
        register.classList.add('visible');
        register.style.display = "block";
        register.onmouseup = function () {
            register.onmouseup = null;
            register.classList.remove('visible');
            register.classList.add('hidden');
            setTimeout(function () { register.style.display = 'none'; }, 2000);
        }
    }
}

.register
{
    background-color:Purple;
    height:0;
    width:0;
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
.register.visible
{
    width:250px;
    height:250px;
    opacity:1;
}
.register.hidden
{
    font-size:0;
    width:0%;
    height:0%;
    opacity:0;
}

<center><div dir="rtl">
    <button style='margin-right:3px' type='button' id='regbtn' onclick='CloseRegister(this)'>Register</button>
    <div onmousedown="CloseRegister(this)" id="register" class="register" style="position:absolute; z-index:2; display:none;" dir="ltr">Register??</div>
</div></center>

现在，它按我的意愿工作了一半。当寄存器 div 打开并单击它时，它运行良好并且有一个过渡。但是 - 当 div 关闭并且我单击注册按钮以打开它时，它会立即打开而不进行转换(它的大小应该从 0 width 和 height 到 .visible 中定义的值。我尝试了我可能想到的所有方法，但我无法修复它..

Answer 1

您只需要在显示 DIV 元素时添加 setTimeout。

代替 register.classList.add('visible');地点

setTimeout(function(){register.classList.add('visible');}, 10);