<section id="waapi-basic-show-hide" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

    <div id="box" class="box">
        <a href="#">I'm a link!!</a>
    </div>

    <p><a href="#">I'm another link!</a></p>
</section>

<script src="../../js/components/waapi-basic-show-hide.js"></script>
<section id="waapi-basic-show-hide" class="animate-things-wrapper">
    <button id="trigger">Trigger</button>

    <div id="box" class="box">
        <a href="#">I'm a link!!</a>
    </div>

    <p><a href="#">I'm another link!</a></p>
</section>

<script src="{{ path '/js/components/waapi-basic-show-hide.js' }}"></script>
/* No context defined. */
  • Content:
    (function () {
      document.addEventListener('DOMContentLoaded', function () {
        console.log("waapi-basic-show-hide active");
    
        const button = document.querySelector('#trigger');
        const box = document.querySelector('#box');
    
        // Honestly I'm not sure if this is the best way to do this, but it sure is *a* way to do this.
    
        // We need the initial display values, assuming there's some CSS styling at play
        const boxRect = box.getBoundingClientRect();
    
        box.style.transform = `translate(${boxRect.width}px, 0)`;
        box.style.display = 'none';
        box.style.opacity = 0;
    
        box.dataset.active = 'false';
    
        button.addEventListener('click', function() {
          if (box.dataset.active === 'in-process') {
            console.log("do nothing");
          }
          else if (box.dataset.active === 'false') {
            // Animate in
    
            box.dataset.active = 'in-process'
            box.style.display = '';
    
            const animIn = box.animate([{
              transformOrigin: 'center center',
              transform: `translate(${boxRect.width * -3}px, 0)`,
              opacity: 0,
              backgroundColor: 'rgba(222,161,161,0.49)'
            }, {
              transformOrigin: 'center center',
              transform: 'translate(0, 0)',
              backgroundColor: 'rgba(255,0,234,0.16)',
              opacity: 1
            }], {
              duration: 200,
              easing: 'cubic-bezier(.99,0,.7,1)',
              fill: 'both'
            });
    
            animIn.onfinish = function() {
              box.dataset.active = 'true';
            }
          }
          else if (box.dataset.active === 'true') {
            // Animate out
    
            box.dataset.active = 'in-process'
    
            const animOut = box.animate([{
              transformOrigin: 'center center',
              transform: 'translate(0, 0)',
              opacity: 1,
              backgroundColor: 'rgba(255,0,234,0.16)',
            }, {
              transformOrigin: 'center center',
              transform: `translate(${boxRect.width * 3}px, 0)`,
              backgroundColor: 'rgb(255,0,234)',
              opacity: 0
            }], {
              duration: 2500,
              easing: 'cubic-bezier(0,.99,.81,1)',
              fill: 'both'
            });
    
            animOut.onfinish = function() {
              box.style.display = 'none';
              box.dataset.active = 'false';
            }
          }
    
        })
      });
    })();
    
  • URL: /components/raw/waapi-basic-show-hide/waapi-basic-show-hide.js
  • Filesystem Path: components/03-waapi/02-waapi-basic-show-hide/waapi-basic-show-hide.js
  • Size: 2.3 KB
  • Handle: @waapi-basic-show-hide
  • Preview:
  • Filesystem Path: components/03-waapi/02-waapi-basic-show-hide/waapi-basic-show-hide.hbs

No notes defined.