Animation in the display change in HTML

Question

Animation in the display change in HTML

Navigation

#1 by (4 votes)
#2 by (3 votes)

3

Hello my dear programmers friends of our Brazil!

I need your help on the following question:
I have a button that when pressed changes the display from one div to one block. So:

CSS

#form-pergunta {
  display: none;
}

JavaScript

function obj(x) {
 return document.getElementById(x);
}

function ApertarBotao() {
 obj("form-pergunta").style.display = "block";
}

Then I call the function TightBotao () there in HTML with onclick ...
I would like to know how to animate this display change ... Type ... make the div form-question appear slowly from top to bottom.

javascript html div css-animations

asked by anonymous 21.07.2016 / 18:55

2 answers

3

Here you have to set the id of the element to appear and the time inside the function onclick of the button

function fadeIn(elem, speed) {
   if(!elem.style.opacity)
   {
       elem.style.opacity = 0;
   }
   var op = setInterval(function(){
      if(elem.style.opacity == 1) clearInterval(op);
      elem.style.opacity = parseFloat(elem.style.opacity) + 0.03;
   }, speed /100);
}

div {
   width: 200px;
   opacity: 0;
   height: 200px;
   background-color: red;
}

<button onclick="fadeIn(hey, 2000)">clica aqui</button>
<div id="hey"></div>

21.07.2016 / 19:01

How to make tabs similar to WhatsApp? How to sort this php array?

score 4 · Accepted Answer

I think this might help you a bit:

    function obj(x) {
        return document.getElementById(x);
    }

    function ApertarBotao() {
        obj("form-pergunta").style.display = "block";
    }

    #form-pergunta{
        width: 300px;
        height: 300px;
        background-color: red;
        display: none;
        -webkit-animation: animate-div 3s;
    }
    @-webkit-keyframes animate-div {
        from { opacity: 0; margin-top: -150px;}
        to { opacity: 1;margin-top: 0px;}
    }

    <div id="form-pergunta"></div>
    <button onclick="ApertarBotao()">Show Div</button>