使用转换进行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);