details > summary の開閉アニメーション

@keyframes details-vertically-open {
  0% {
    opacity: 0;
    max-height: 0;
  }
  100% {
    opacity: 1;
    max-height: 100vh;
  }
}
@keyframes details-horizontally-open {
  0% {
    opacity: 0;
    max-width: 0;
  }
  100% {
    opacity: 1;
    max-width: 50vw;
  }
}
@keyframes details-diagonally-open {
  0% {
    opacity: 0;
    max-height: 0;
    max-width: 0;
  }
  100% {
    opacity: 1;
    max-height: 100vh;
    max-width: 50vw;
  }
}
details.marker-none	> summary::-webkit-details-marker { display: none; }
details.marker-none	> summary::marker { content: none; }
details.marker-none	> summary { display: block; }	/* for SeaMonkey */
	:

details:not(.horizontally):not(.diagonally)[open]:not(.noanimation) > summary ~ * {
  animation: details-vertically-open 1.6s ease;
}
details.horizontally[open]:not(.noanimation) > summary ~ * {
  animation: details-horizontally-open 1.6s ease;
}
details.diagonally[open]:not(.noanimation) > summary ~ * {
  animation: details-diagonally-open 1.6s ease;
}

<script src="../../common/local/cubic_equation.js"></script>
<script src="../../common/local/animation-timing-functions.js"></script>
	:
window.addEventListener('load', function() {
  const js_animation = true, css_compatible = !true;
  for (const summary of document.body.querySelectorAll('details:not(.noanimation) > summary')) {
    const details = summary.parentNode;
    const elements = Array.from(details.querySelectorAll('details:not(.noanimation) > *:not(summary)'));
    summary.addEventListener('click', function(event) {
      event.stopPropagation();
      details.open = !details.open;
      const intervallers = { open: null, close: null };
      summary.addEventListener('click', function(event) {
	event.stopPropagation();
	if (intervallers['open']) {
	  clearInterval(intervallers['open']);
	  intervallers['open'] = null;
	}
	if (intervallers['close']) {
	  clearInterval(intervallers['close']);
	  intervallers['close'] = null;
	  details.open = false;
	}
      });
      const open = details.open;
      const timeout = open ? 1600 : 400, interval = open ? 8 : 40, duration = timeout/interval;
      if (js_animation && (!css_compatible || open)) {
	const opacity = 1., width = open ? 50 : 25, height = open ? 100 : 50;
	const f = open ?
		  animation_timing_functions.ease/*linear*//*ease_in*//*ease_out*//*ease_in_out*/ :
		  animation_timing_functions./*ease*//*linear*//*ease_in*//*ease_out*/ease_in_out
		  /*steps_jump_end(duration)*/;
	let count = 0, val = f((open ? count : duration - count)/duration);
	elements.map(v=>v.style.opacity = `${(val < 0) ? 0 : (opacity*val).toFixed(6)}`);
	if (details.classList.contains('horizontally') || details.classList.contains('diagonally'))
	  elements.map(v=>v.style.maxWidth = `${(val < 0) ? 0 : (width*val).toFixed(3)}vw`);
	if (!details.classList.contains('horizontally') || details.classList.contains('diagonally'))
	  elements.map(v=>v.style.maxHeight = `${(val < 0) ? 0 : (height*val).toFixed(3)}vh`);
	const start_time = performance.now();
	intervallers[open ? 'open' : 'close'] = setInterval(function() {
	  const watch_time = performance.now();
	  const t = (watch_time - start_time)/timeout;
	  count = /*count + 1*/Math.round((watch_time - start_time)/interval);
	  val = f(/*(open ? count : duration - count)/duration*/open ? t : 1. - t);
	  if (open) details.open = true;
	  if (!(count < duration)) {
	    clearInterval(intervallers[open ? 'open' : 'close']);
	    intervallers[open ? 'open' : 'close'] = null;
	    if (!open) details.open = false;
	  }
	  elements.map(v=>v.style.opacity = (count < duration) ? `${(val < 0) ? 0 : (opacity*val).toFixed(6)}` : null);
	  if (details.classList.contains('horizontally') || details.classList.contains('diagonally'))
	    elements.map(v=>v.style.maxWidth = (count < duration) ? `${(val < 0) ? 0 : (width*val).toFixed(3)}vw` : null);
	  if (!details.classList.contains('horizontally') || details.classList.contains('diagonally'))
	    elements.map(v=>v.style.maxHeight = (count < duration) ? `${(val < 0) ? 0 : (height*val).toFixed(3)}vh` : null);
	}, interval);
      }
      else
	details.open = !details.open;
    });
  }
});