1

Necesito que el contenido de mi h1 aparezca de manera no tan brusca al presionar mi button, intenté poniéndole una transición, desapareciendo el elemento y después volviéndolo a aparecer con Javascript, pero no resultó.

function saludo(){
  document.getElementById('hola').style.display="inline";
}
h1{
  display: none;
  transition: 10s;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="practica.css">
</head>
<body>
<button class="resultado" onclick="saludo()">resultado</button>
<h1 id="hola">Hola colombiaaaaaaaa</h1>
	<script type="text/javascript" src="practica.js"></script>	
</body>
</html>

2 respuestas 2

3

Para que sea efectiva transition necesita que la propiedad sea graduable, display tiene o un estado o otro pero no se puede graduar. En tu caso te recomiendo que uses opacity que tiene una escala 0-1

En tu codigo quedaria asi:

function saludo(){
  document.getElementById('hola').style.opacity="1";
}
h1{
  opacity: 0;
  transition: 10s;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="practica.css">
</head>
<body>
<button class="resultado" onclick="saludo()">resultado</button>
<h1 id="hola">Hola colombiaaaaaaaa</h1>
	<script type="text/javascript" src="practica.js"></script>	
</body>
</html>

Espero que te sirva, saludos.

2
  • Y en el caso de que quiera hacerlo con getElementsByClassName qué debería hacer? Commented el 26 oct. 2019 a las 14:13
  • 2
    En el caso de clases cambia la funcion de javascript por -> document.getElementsByClassName('hola')[0].style.opacity="1";
    – neollob
    Commented el 26 oct. 2019 a las 14:20
0

Te hice algunos retoques:

1- En el JS, ahora la funcion saludo() primero elimina la clase hola (que agregué en el HTML) y luego agrega la clase aparece.

2- En el CSS, la clase hola solamente mantendrá escondido el div con las propiedades visibility y opacity. Mientras que la clase aparece modificará estas dos propiedades, y lo hará con un delay de 0s para la propiedad visibility y con un delay de 1s para la propiedad opacity.

 function saludo(){
      document.getElementById('hola').classList.remove('hola');
      document.getElementById('hola').classList.add('aparece');
    }
    .hola{
      visibility: hidden;
      opacity: 0;
      }

    
.aparece{
      visibility: visible;
      opacity: 1;
      transition: visibility 0s, opacity 1s linear;      
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="practica.css">
    </head>
    <body>
    <button class="resultado" onclick="saludo()">resultado</button>
    <h1 id="hola" class="hola">Hola colombiaaaaaaaa</h1>
    	<script type="text/javascript" src="practica.js"></script>	
    </body>
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.