101 Ways to Animate Things

Add a class 

<section class="animate-things-wrapper add-a-class">
    <button id="addClass">Add class</button>

    <div id="box" class="box">
        Hi there
    </div>
</section>

<script src="../../js/components/add-a-class.js"></script>
 
<section class="animate-things-wrapper add-a-class">
    <button id="addClass">Add class</button>

    <div id="box" class="box">
        Hi there
    </div>
</section>

<script src="{{ path '/js/components/add-a-class.js' }}"></script>
 
/* No context defined. */
  • Content: 
    (function () {
  document.addEventListener('DOMContentLoaded', function () {
    console.log("Add a class active");

    const button = document.querySelector('#addClass');
    const box = document.querySelector('#box');

    button.addEventListener('click', function() {
      box.classList.add('active');
    })
  });
})();
  • URL: /components/raw/add-a-class/add-a-class.js
  • Filesystem Path: components/01-basic/01-add-a-class/add-a-class.js
  • Size: 326 Bytes
  • Content: 
    .add-a-class {
  .box {
    &.active {
      background-color: #ff00ff;
      color: #ffffff;
    }
  }
}
  • URL: /components/raw/add-a-class/add-a-class.scss
  • Filesystem Path: components/01-basic/01-add-a-class/add-a-class.scss
  • Size: 106 Bytes

No notes defined.