CSS Change Time with Javascript

Question

I have a function:

function togglePopup1() {
    document.getElementById('desktop-card').style.width = '480px';
}

The code is so that the width page increase with one click.

But how do I make this change happen, for example, in 2 seconds? I’ve looked everywhere and couldn’t find how to insert a runtime.

Besides width, there are several other CSS properties that are also changed at the same time.

Answer 1

I’m not very good at javascript but the solution is simple and to be done with CSS using Transition.

function togglePopup1() {
    document.getElementById('desktop-card').style.width = '480px';
}

#desktop-card {
  width: 100px; /* tamanho inicial */
  height: 50px; 
  background: #ddd; /* Cor para demonstrar o efeito  */
  transition: 2s; /* Class transition */
  -moz-transition: 2s; /* Firefox 4 */
  -webkit-transition: 2s; /* Safari and Chrome */
  -o-transition: 2s; /* Opera */
}

<button onclick="togglePopup1()">Start</button>
<div id="desktop-card"><div>

Answer 2

Assuming you have the style class ready for the desktop-card, just add the properties transition in that class and when to change the style in JS it will receive the transition according to what you set up:

function togglePopup1() {
    document.getElementById('desktop-card').style.width = '480px';
}

#desktop-card{
  background-color: black;
  color: white;
  width: 100px;
  transition-delay: 2s;
  transition-duration: 2s;
}

<button onclick="togglePopup1()">Aperte Aqui</button>

<div id="desktop-card">Teste</div>

Note: I used two properties transition, to transition-delay which specifies the time for the animation to begin and transition-duration specifying the duration of the animation.

There are other properties you can use. Here you can read and see more examples.

Answer 3

Vitor, vllw mano.

I got it here, Druga was so sleepy I didn’t even remember I could use it with CSS.

However, it did not work for example

document.getElementById('desktop-card').style.display = 'block';

In case Div #desktop-card appears smooth too.