Animation in javascript with DOM insted of Jquery-CodePudding

Is possible to recreate this animation with DOM instead of Jquery? if so how?

$('.bubbles-animation')
  .animate({
    'bottom': '100%',
    'opacity' : '-=0.7'
   }, 2000, function(){
     $(this).remove()
   }
);

CodePudding user response：

jQuery is just js and css under the hood. It is absolutely possible to recreate any jquery action in vanilla js. If you wanted to create a 1:1 replica of jquery action, you could inspect the source code to see how jquery is accomplishing the task. However, if all you need to do is use vanilla js to create an animation and then remove the element, here is a demo of how to accomplish that.

My entire code snippet is wrapped in an async anonymous function which will be immediately called. This prevents naming conflicts within the scope of my code, and also allows me to access the await keyword.

First I create two helper functions. $ will make it so I can grab elements from the DOM in a way that resembles jquery. The wait helper function returns a promise that resolves after a timeout.

I wait 1000ms or 1s before changing the opacity as a personal preference to the timing of the animation.

After I change the opacity I wait 2 more seconds, which is also how long it takes the transition to display, and then I remove the element.

Keep in mind, this will only target the first element with a class of bubbles-animation, also I would like to add that personally I prefer changing transition on the height rather than the opacity because it collapses other elements a bit more smoothly in my own opinion.

The css is pretty self explanatory but if you have any trouble with it I would recommend checking out this demo

(async () => {
  const $ = str => document.querySelector(str);
  const wait = t => new Promise(r => setTimeout(r, t));
  
  await wait(1000);
  $(".bubbles-animation").style.opacity = "0.3";
  await wait(2000);
  $(".bubbles-animation").remove();
})();

.bubbles-animation {
  transition: opacity 2s;
}

<div class="bubbles-animation">Vanish!</div>
<div>Stay!</div>

CodePudding user response：

Yes, you can rely on CSS transitions to achieve it. However, that'll depend on what you'll try to achieve. There is not enough information to go far in the reflection.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

document.getElementById('css-js')
  .addEventListener('click',
    () => document.querySelector('.bubbles').classList.add('animation'))

document.getElementById('reset')
  .addEventListener('click',
    () => document.querySelector('.bubbles').classList.remove('animation'))

#settings {
  position: fixed;
  top: 0px;
}

.bubbles {
  position: absolute;
  height: 100%;
  top: 0px;
  width: 100%;

  background-color: green;

  transition-property: transform, opacity;
  transition-duration: 2s, 1.5s;
}

.animation {
  opacity: 0;
  transform: translateY(-100%);
}

<div class=bubbles></div>

<div id=settings>
  <button id=css-js>CSS &amp; Native JS</button>
  <button id=reset>Reset</button>
</div>