UPDATE:
Ya quedo arreglado. Muchas gracias a todos y buen dia n_n
ORIGINAL:
Saludos. Busco de nuevo su ayuda con Javascript (Siempre es Javascript).
Verán, tengo este sitio.
http://prisma.breiq.com/Ejemplo-Blog-Ciencia/
Lo que quiero que haga al hacer clicl en la imagen giratoria, es que el footer y header que se ven, se hagan con 0% de altura y un content, con 0% al 100. Eso si lo hace, pero por alguna razón no funciona la transición.
Igual otro favor. Alguien sabrá porque en Google Chrome y Edge se deforma ese SVG?? En firefox no me pasa.
Gracias por su ayuda y les mando un saludo.
CODIGO:
Código HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo Blog Ciencia</title>
<style type="text/css">
*{
margin:0;
padding:0;
background-color:transparent;
}
body, html{
height:100%;
width:100%;
}
#start-button{
position:fixed;
top: 50%;
left: 50%;
height:40%;
width:auto%;
-webkit-transform: translate(-50%,-50%) !important;
-moz-transform: translate(-50%,-50%) !important;
-ms-transform: translate(-50%,-50%) !important;
-o-transform: translate(-50%,-50%) !important;
transform: translate(-50%,-50%) !important;
-webkit-transition: display 3s;
-moz-transition: display 3s;
transition: display 3s;
}
#start-button object{
height:100%;
width:100%;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#start-button object:hover{
cursor:pointer;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
header{
width:100%;
height:50%;
background-color:#C90;
-webkit-transition: display 3s;
-moz-transition: display 3s;
transition: display 3s;
}
content{
height:0%;
width:100%;
background-color:#FFF;
-webkit-transition: height 3s;
-moz-transition: height 3s;
transition: height 3s;
}
footer{
width:100%;
height:50%;
background-color:#39F;
-webkit-transition: display 3s;
-moz-transition: display 3s;
transition: display 3s;
}
</style>
</head>
<body>
<div id="start-button">
<object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Dr_Manhattan_symbol.svg/550px-Dr_Manhattan_symbol.svg.png"> Para el correcto uso de este sitio es necesario soportar vectores. Por favor, utilice otro navegador.
</object>
</div>
<header>
</header>
<article id="content">
</article>
<footer>
</footer>
<!-- JAVASCRIPT -->
<script type="text/javascript">
var button=document.getElementById("start-button");
button.addEventListener
(
"click",
function()
{
this.style.display="none";
}
) ;
button.addEventListener
(
"click",
function()
{
document.getElementById("content").style.height = "100%" ;
}
) ;
button.addEventListener
(
"click",
function()
{
var elements = document.getElementsByTagName("header");
var length = elements.length;
for (var i = 0; i < length; i++){
elements[i].style.height="0%";
}
}
) ;
button.addEventListener
(
"click",
function()
{
var elements = document.getElementsByTagName("footer");
var length = elements.length;
for (var i = 0; i < length; i++){
elements[i].style.height="0%";
}
}
) ;
</script>
<!-- FIN JAVASCRIPT -->
</body>
</html>