fadeinout.js 942 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. var fadeOut = function(node, duration) {
  2. node.style.opacity = 1;
  3. var start = performance.now();
  4. requestAnimationFrame(function tick(timestamp) {
  5. var easing = (timestamp - start) / duration;
  6. node.style.opacity = Math.max(1 - easing, 0);
  7. if (easing < 1) {
  8. requestAnimationFrame(tick);
  9. } else {
  10. node.style.opacity = '';
  11. node.style.display = 'none';
  12. }
  13. });
  14. }
  15. var fadeIn = function (node, duration) {
  16. if (getComputedStyle(node).display !== 'none') return;
  17. if (node.style.display === 'none') {
  18. node.style.display = '';
  19. } else {
  20. node.style.display = 'block';
  21. }
  22. node.style.opacity = 0;
  23. var start = performance.now();
  24. requestAnimationFrame(function tick(timestamp) {
  25. var easing = (timestamp - start) / duration;
  26. node.style.opacity = Math.min(easing, 1);
  27. if (easing < 1) {
  28. requestAnimationFrame(tick);
  29. } else {
  30. node.style.opacity = '';
  31. }
  32. });
  33. }