visible-element

Visible element with animation.

installation

npm install @jswork/visible-element

usage

<div id="my-element" data-visible="false"></div>
<button id="my-button">Toggle</button>

[hidden] {
  display: none;
}

#my-element {
  animation: show 0.3s ease-in-out;
}

#my-element[data-visible="true"] {
  animation: close 0.3s ease-in-out;
}

@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes close {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

import VisibleElement from 'visible-element';
const element = document.getElementById('my-element');
const button = document.getElementById('my-button');
const visible = new VisibleElement(element, {
  onShow: () => { console.log('show'); },
  onShowed: () => { console.log('showed'); },
  onClose: () => { console.log('close'); },
  onClosed: () => { console.log('closed'); },
  onChange: (status) => { console.log(status); },
});
button.addEventListener('click', () => {
  visible.toggle();
});

license

Code released under the MIT license.