Błąd transition w CSS

Question

#win
{
	opacity: 0;
	position: fixed;
	background-color: #FFFF00;
	color: #222;
	padding: 50px;
	text-align: center;
	width: calc(100vw - 100px); height: calc(100vh - 100px);
	top: 0px;
	left: 0px;
    transition: 2s;
	display: none;
}

#win.show
{
	opacity: 1;
	display: block;
}

Po dodaniu JavaScriptem klasy show opacity zmienia się bez animacji, ale gdy usunąłem display wszystko działało, jednak potrzebuję go. Czy ktoś wie jak to naprawić? Dziękuję za wszystkie odpowiedzi :)

––EDIT––

Nie może działać onclick gdy jest niewidoczny...

Answer 1

zamiast display możesz użyć visibility (Nie zawsze display można zastąpić przez visibility ze względu na to, że się trochę różnią działaniem, ale w tym przypadku (mamy tu position:fixed) powinno być ok).

Comments

Ale visiblity, można kliknąć, i wtedy zadziała onclick.

---

no to po tych dwóch sekundach w JS ustawiasz display: none i tyle :D

---

Ok, dobry pomysł