I'm currently working on a website and I'm facing an issue with the transition not functioning as expected. The problem persists even when the 7.css stylesheet is removed and interestingly, the transition works fine when using window:hover.
My attempt to add a class through jQuery should trigger a CSS transition on the window class. However, this doesn't seem to be happening as intended. The class gets added but the transition does not occur.
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://unpkg.com/7.css">
</head>
<body>
<div class="vertical"></div>
<div id=info1>
<div class="window active glass center400" style="max-width:400px;">
<div class="title-bar">
<div class="title-bar-text">Info</div>
<div class="title-bar-controls">
<button aria-label="Minimize" disabled></button>
<button aria-label="Maximize" disabled></button>
<button aria-label="Close" class=closewindow data-parentid=info1 onclick=closeinfo()></button>
</div>
</div>
<div class="window-body has-space">
<h4>donkeys are pretty cool</h4><br><br>
i love donkeys.
</div>
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
background: url(img0.jpg) center center fixed;
overflow: hidden;
}
.window {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transform: perspective(0), rotateZ(0);
opacity: 1;
-webkit-transition: 200ms ease all, 300ms ease opacity;
-moz-transition: 200ms ease all, 300ms ease opacity;
-ms-transition: 200ms ease all, 300ms ease opacity;
transition: 200ms ease all, 300ms ease opacity;
}
.window-body {
-webkit-user-select: default;
-ms-user-select: default;
user-select: default;
}
div.vertical {
display: none;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 1000 !important;
background: red;
}
@media only screen and (max-aspect-ratio: 6/5) {
div.vertical {
display: block;
}
}
h4 {
padding: 0;
margin: 0;
}
.center400 {
left: calc(50vw - 200px);
top: 35vh;
}
[role=button],button{
transition: 100ms;
}
.close {
transform-style: preserve-3d;
transform: perspective(1500px) rotateX(10deg) translateY(-10px);
opacity: 0;
}
jQuery:
function closeinfo() {
$("#info1").addClass("close");
}
$(".window").draggable({
handle: ".title-bar"
});
fiddle: fiddle