0

como hago para animar un div para que aparezca con un efecto fadeIn pero con javascript y no Jquery? Ya probe con ponerle transition y animate en css y no anda. Tambien probe con ponerle opacity 0 y en JS opacity 1. Visibility hidden.

function lightMenu () {
var menuMenu = document.getElementById("menu").style.display = "none";
var menuMenuDos = document.getElementById("menu").style.display = "block";
	if (menuMenu != menuMenuDos) {
		menuMenu.style.display = "block"; 
	}
}

function offMenu () {
var menuMenu = document.getElementById("menu").style.display = "block";
var menuMenuDos = document.getElementById("menu").style.display = "none";
	if (menuMenu != menuMenuDos) {
		menuMenu.style.display = "none"; 
	}
}

4 respuestas 4

2

Bueno leí que tienes problemas al tratar de hacerlo con css y javascript, lo importante seria crear una clase donde le indique el comportamiento en cuanto visibilidad así:

const mostrar = () => {
 document.querySelector(".recuadro").classList.remove("ocultar");
}

const ocultar = () => {
 document.querySelector(".recuadro").classList.add("ocultar");
}
.recuadro{
  border:1px solid red;
  height:100px;
  transition: all .7s;
  width:100px;
}

.ocultar{
  opacity:0;
}
<div class="recuadro"></div>
<button onclick="mostrar()">Mostrar</button>
<button onclick="ocultar()">Ocultar</button>

El truco está en declarar en la clase que tiene el DIV una propiedad llamada transition donde le indicas el efecto que quieres y los mili-segundos que tardará en terminar el efecto, en este caso coloque que todos "all" efectos tarden 0.7 segundos, puedes reemplazar el all por cualquier propiedad en especifica, en este caso opacity así:

const mostrar = () => {
 document.querySelector(".recuadro").classList.remove("ocultar");
}

const ocultar = () => {
 document.querySelector(".recuadro").classList.add("ocultar");
}
.recuadro{
  border:1px solid red;
  height:100px;
  transition: opacity .7s;
  width:100px;
}

.ocultar{
  opacity:0;
}
<div class="recuadro"></div>
<button onclick="mostrar()">Mostrar</button>
<button onclick="ocultar()">Ocultar</button>

Luego declaras una clase que te permita realizar el efecto que quiere una vez que tenga dicha clase, en este caso la clase ocultar con la propiedad opacity la cual se encarga de colocarlo transparente.

Puedes hacerlo netamente con Javascript? si claro que si, pero recomiendo que separes todo lo que tiene de javascript del css así tienes un orden y solo te limitas en tu JS en agregar o remover una clase y en el CSS te ocupas de tu estilo.

VERSIÓN CON TOGGLE

Una versión reducida del codigo anterior seria usando toggle así:

const mostrarOcultar = () => {
 document.querySelector(".recuadro").classList.toggle("ocultar");
}
.recuadro{
  border:1px solid red;
  height:100px;
  transition: opacity .7s;
  width:100px;
}

.ocultar{
  opacity:0;
}
<div class="recuadro"></div>
<button onclick="mostrarOcultar ()">Mostrar / Ocultar</button>

Espero te sirva.

0

Debes de temporizar el cambio de opacidad, así debería de funcionar, cualquier duda hazla saber.

let btn1 = document.getElementById('ocultar');
btn1.addEventListener('click', ocultar);

let btn2 = document.getElementById('mostrar');
btn2.addEventListener('click', mostrar);

function ocultar() {
for (i = 10; i >= 0; i--)
 setTimeout("document.getElementById('contenedor').style.opacity = '" + (i / 10) + "'", (10 - i) * 100)
}


function mostrar() {
for (i = 0; i <= 10; i++)
 setTimeout("document.getElementById('contenedor').style.opacity = '" + (i / 10) + "'", i * 100)
}
<div id="contenedor">cajita</div>

<button id="ocultar">Ocultar</button>
<button id="mostrar">Mostra</button>

0

function show(){
  document.querySelector("#aocultar").class="show"
}
function hide(){
  document.querySelector("#aocultar").class="hide"
}
#aocultar{
  transition: all .5s;
}

#aocultar.hide{
  opacity: 0;
}

#aocultar.show{
  opacity: 1;
}
<div id="aocultar" >Div a ocultar</div>
<button onclick="show()">hide</button>
<button onclick="hide()">show</button>

0

let btn1 = document.getElementById('ocultar');
btn1.addEventListener('click', ocultar);

let btn2 = document.getElementById('mostrar');
btn2.addEventListener('click', mostrar);

function ocultar() {
  for (i = 10; i >= 0; i--)
    setTimeout("document.getElementById('contenedor').style.opacity = '" + (i / 10) + "'", (10 - i) * 100)
}


function mostrar() {
  for (i = 0; i <= 10; i++)
    setTimeout("document.getElementById('contenedor').style.opacity = '" + (i / 10) + "'", i * 100)
}
<div id="contenedor">Desde el cielo nos amenaza la indignación de Dios por todas las maldades e injusticias de aquellos que sofocan la verdad con el mal. Todo lo que se puede conocer de Dios lo tienen ante sus ojos, pues Dios se lo manifestó Lo que Él es y que no podemos
  ver ha pasado a ser visible gracias a la creación del universo, y por sus obras captamos algo de su eternidad, de su poder y de su divinidad. De modo que no tienen disculpa. A pesar de que conocían a Dios, no le rindieron honores ni le dieron gracias
  como corresponde. Al contrario, se perdieron en sus razonamientos y su conciencia cegada se convirtió en tinieblas. Creyéndose sabios, se volvieron necios. Incluso reemplazaron al Dios de la Gloria, al Dios incorruptible , con imágenes de todo lo pasajero:
  imágenes de hombres, de aves, de animales y reptiles. Por eso Dios los abandonó a sus pasiones secretas; se entregaron a la impureza y deshonraron sus propios cuerpos. Cambiaron la verdad de Dios por la mentira. Adoraron y sirvieron a seres creados
  en lugar del Creador, que es bendecido por todos los siglos: ¡Amén! Por esto Dios dejó que fueran presa de pasiones vergonzosas: ahora sus mujeres cambian las relaciones sexuales normales por relaciones contra la naturaleza. Los hombres, asimismo, dejan
  la relación natural con la mujer y se apasionan los unos por los otros; practican torpezas varones con varones, y así reciben en su propia persona el castigo merecido por su aberración. Ya que juzgaron inútil conocer a Dios, Dios a su vez los abandonó
  a los errores de su propio juicio, de tal modo que hacen absolutamente todo lo que es malo. En ellos no se ve más que injusticia, perversidad, codicia y maldad. Rebosan de envidia, crímenes, peleas, engaños, mala fe, chismes Y calumnias. Desafían a
  Dios, son altaneros, orgullosos, farsantes, hábiles para lo malo y no obedecen a sus padres. Son insensatos, desleales, sin amor, despiadados. Conocen las sentencias de Dios y saben que son dignos de muerte quienes obran de esa forma. Pero no solamente
  lo hacen, sino que aprueban a los que actúan de igual modo. Por lo tanto, amigo mío, si eres capaz de juzgar, ya no tienes disculpa. Te condenas a ti mismo cuando juzgas a los demás, pues tú haces lo que estás condenando. Nos parece bien que Dios condene
  a los que hacen tales cosas, Pero tú, que haces lo mismo, ¿piensas que escaparás del juicio de Dios porque tanto tú como él condenan a los demás? Esto sería aprovecharte de Dios y de su inmensa bondad, paciencia y comprensión, y no ver que esa bondad
  te quiere llevar a la conversión. Si tu corazón se endurece y te niegas a cambiar, te estás preparando para ti mismo un gran castigo para el día del juicio, cuando Dios se presente como justo Juez. El pagará a cada uno de acuerdo con sus obras. Dará
  vida eterna a quien haya seguido el camino de la gloria, del honor y la inmortalidad, siendo constante en hacer el bien; Y en cambio habrá sentencia de reprobación para quienes no han seguido la verdad, sino más bien la injusticia. Habrá sufrimientos
  y angustias para todos los seres humanos que hayan hecho el mal, en primer lugar para el judío, y también para el griego. La gloria, en cambio, el honor y la paz serán para todos los que han hecho el bien, en primer lugar para el judío, y también para
  el griego, Porque Dios no hace distinción de personas. Quienes pecaron sin conocer la Ley, serán eliminados sin que se hable de la Ley; y los que pecaron conociendo la Ley, serán juzgados por la Ley. Porque no son justos ante Dios los que escuchan la
  Ley, sino los que la cumplen. Cuando los paganos, que no tienen ley, cumplen naturalmente lo que manda la Ley, están escribiendo ellos mismos esa ley que no tienen, Y así demuestran que las exigencias de la Ley están grabadas en sus corazones. Serán
  juzgados por su propia conciencia, y los acusará o los aprobará su propia razón El día en que Dios juzgue lo más íntimo de las personas por medio de Jesucristo. Es lo que dice mi Evangelio. Porque mira tú eres judío, y te apoyas en la Ley y te sientes
  orgulloso de tu Dios; Conoces su voluntad porque la Ley te la enseñó, y sabes cómo actuar según las circunstancias.; Tú te crees guía de ciegos, luz en la oscuridad, Maestro de los que no saben, el que enseña a niños chicos y posees en la Ley todo lo
  esencial, y las normas del conocimiento y de la verdad. Pues bien, tú que enseñas a los demás, ¿por qué no te instruyes a ti mismo? Dices que no hay que robar, ¡y tú robas! Dices que no se debe engañar a la propia esposa, ¡y tú lo haces! Afirmas que
  aborreces a los ídolos, pero ¡robas en sus templos! Te sientes orgulloso de la Ley, pero pasas por encima de ella, de tal manera que deshonras a tu Dios. Ya lo dice la Escritura: Ustedes son causa de que los paganos insulten el nombre de Dios. La circuncisión
  te sirve si cumples la Ley; pero si no la cumples, te colocas entre los que no están circuncidados. Por el contrario, si uno de ellos cumple los mandatos de la Ley, será considerado exactamente como un circuncidado. El que cumple la Ley sin estar marcado
  físicamente con la circuncisión podrá juzgarte a ti, que eres infiel a la Ley a pesar de que tienes a la vez la circuncisión y la Ley. Porque lo que a uno lo hace judío no es algo exterior, y la circuncisión real no es la que está hecha en el cuerpo.
  Ser judío es una realidad íntima, y la circuncisión debe ser la del corazón, obra espiritual y no cuestión de leyes escritas. No es algo que puedan valorar los hombres, sino sólo Dios. Entonces, ¿cuál es la ventaja de ser judío?, ¿cuál la utilidad de
  la circuncisión? Grande, bajo todo punto de vista. En primer lugar, fue a los judíos a quienes confió Dios su palabra. Es verdad que algunos de ellos no le respondieron, pero ¿hará su infidelidad que Dios no sea fiel? ¡Ni pensarlo! Se comprobará que
  Dios es fidelidad, mientras que el hombre siempre defrauda, como dice la Escritura: Será probado que tus palabras son verdaderas y saldrás vencedor si te quieren juzgar. Pero si nuestra maldad demuestra que Dios es justo, hablando a lo humano se podría
  preguntar: ¿No es Dios injusto al castigarnos? -De ninguna manera, pues si no, ¿cómo podría Dios juzgar al mundo? – Pero tal vez replicarán: Si la mentira mía hace resaltar la verdad de Dios, aumentando así su gloria, ¿cómo me tratarán de pecador? –
  ¡Muy bien! Entonces hagamos el mal para que venga el bien. Algunos calumniadores dicen que ésa es nuestra enseñanza, pero tendrán que responder de tales palabras. ¿Tenemos, entonces, alguna superioridad? Sí y no. Acabamos de demostrar que todos, judíos
  y no judíos, están bajo el dominio del pecado, Como dice la Escritura: No hay nadie bueno, ni siquiera uno. No hay ninguno sensato, nadie que busque a Dios. Todos se han extraviado, ya no sirven para nada. No hay quien obre el bien, ni siquiera uno.Su
  garganta es un sepulcro abierto, y con su lengua urden engaños. Sus labios esconden veneno de serpiente y su boca está llena de maldiciones y amargura. Corren a donde puedan derramar sangre. Detrás de ellos dejan ruina y miseria. No conocen el camino
  de la paz, El temor de Dios es lo que menos recuerdan. Pero sabemos que todo lo que dice la Escritura está dicho para el mismo pueblo que recibió la Ley. Que todos, pues, se callen y el mundo entero se reconozca culpable ante Dios. Porque en base a
  la observancia de la Ley no será justificado ningún mortal ante Dios. El fruto de la Ley es otro: nos hace conscientes del pecado. Ahora se nos ha revelado cómo Dios nos hace justos sin hablar de la Ley; pero ya atestiguaban la Ley y los profetas. Mediante
  la fe según Jesucristo Dios reordena y hace justos a todos los que llegan a la fe. No hay distinción de personas, Pues todos pecaron y están faltos de la gloria de Dios. Pero todos son hechos justos gratuitamente y por pura bondad, mediante la redención
  realizada en Cristo Jesús. Dios lo puso como la víctima cuya sangre nos consigue el perdón, y esto es obra de fe.


</div>

<button id="ocultar">Ocultar</button>
<button id="mostrar">Mostra</button>

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 17 may. a las 18:09

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.