This is what I have achieved so far:
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>Currently, it functions partially as intended. When the registration div is open and clicked, it performs well with a transition. However, when the div is closed and the registration button is clicked to open it again, it instantly opens without a transition (It should smoothly transition from 0 width and height to the specified values in .visible). I have tried numerous approaches but have been unable to resolve this issue..