How do I animate my form to fade in (or do other stuff) when I click a button using only vanilla JS?

Question

I'm trying to animate my Create Note form in when I click on a button but it just immediately comes in without a transition. What I'm trying to do is to add a class that sets its display from 'none' to 'flex'.

This is how the form looks (HTML)

//Finally, this is the javascript that I'm trying to get it to work
const createBtn = document.getElementById('createBtn');
const form = document.getElementById('noteForm');

createBtn.addEventListener('click', () => {
  form.classList.toggle('active');
});

.active {
  display: flex;
}

form {
  display: none;
  /* other propertites */
  transition: all 250ms ease-in;
}

<button id="createBtn">Create a Note</button>
<form id="noteForm">
  <!--form Content-->
  <input type="text">
</form>

I am not sure if this is the correct way to be animating things in but I want to know how I can pull something like this off with vanilla JS.

Changing the display attribute will never result in a transition. What kind of transition are you hoping to implement? — robinsax, May 20 '20 at 17:43
@robinsax yes you are right indeed. FZs just pointed that out. Thanks again :) — spaceSentinel, May 20 '20 at 17:52
Does this answer your question? [How to do fade-in and fade-out with JavaScript and CSS](https://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css) — Heretic Monkey, May 20 '20 at 18:17

FZs · Accepted Answer · 2020-05-20T18:05:47.337

Your code is right... except that display is not an animatable property.

For a fading effect, you have to use opacity:

//Finally, this is the javascript that I'm trying to get it to work
const createBtn = document.getElementById('createBtn');
const form = document.getElementById('noteForm');

createBtn.addEventListener('click', () => {
  form.classList.toggle('active');
});

.active {
  opacity: 1;
}

form {
  display: flex;
  opacity: 0;
  /* other propertites */
  transition: all 250ms ease-in;
}

<button id="createBtn">Create a Note</button>
<form id="noteForm">
  <!--form Content-->
  <input type="text">
</form>

But note that the form will remain interactive even when hidden. To avoid that, you can use the solution from this answer on SO:

//Finally, this is the javascript that I'm trying to get it to work
const createBtn = document.getElementById('createBtn');
const form = document.getElementById('noteForm');
const fieldset = document.getElementById('noteFormFieldset');

createBtn.addEventListener('click', () => {
  form.classList.toggle('active');
  fieldset.disabled = !form.classList.contains('active')
});

.active {
  opacity: 1;
}

form {
  display: flex;
  opacity: 0;
  /* other propertites */
  transition: all 250ms ease-in;
}

<button id="createBtn">Create a Note</button>
<form id="noteForm">
  <fieldset id="noteFormFieldset" disabled>
    <!--form Content-->
    <input type="text">
  </fieldset>
</form>

Ahhh! Thank you so much <3 I can't believe I wasted so much time just because I decided to animate one of the only few properties that are not transitionable :P — spaceSentinel, May 20 '20 at 17:50

How do I animate my form to fade in (or do other stuff) when I click a button using only vanilla JS?

1 Answers1