微件:GFLMail

<script> (function () {

 if (window._gflMailInit) return;
 window._gflMailInit = true;

 function openDetail(item) {
   var idx  = item.getAttribute('data-gfl-index');
   var root = item.closest('.gfl-mail');
   if (!root) return;

   // 先撑开外壳到固定高度，再做过渡
   var fixedH = getComputedStyle(root).getPropertyValue('--gfl-height').trim() || '480px';
   // 先把当前自然高度设为起点，避免从0跳变
   root.style.height = root.offsetHeight + 'px';
   // 强制重排后过渡到目标高度
   root.offsetHeight;
   root.style.transition = 'height .3s cubic-bezier(.4,0,.2,1)';
   root.style.height = fixedH;

   root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
     d.classList.remove('is-open');
   });
   var target = root.querySelector('#gflDetail-' + idx);
   if (!target) return;

   root.classList.add('view-detail');
   requestAnimationFrame(function () {
     target.classList.add('is-open');
   });
 }

 function closeDetail(btn) {
   var root = btn.closest('.gfl-mail');
   if (!root) return;

   root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
     d.classList.remove('is-open');
   });
   root.classList.remove('view-detail');

   // 过渡回自然高度
   var listH = root.querySelector('.gfl-list').scrollHeight + 2; // +2 for border
   root.style.transition = 'height .3s cubic-bezier(.4,0,.2,1)';
   root.style.height = listH + 'px';
   root.addEventListener('transitionend', function onEnd(e) {
     if (e.propertyName !== 'height') return;
     root.removeEventListener('transitionend', onEnd);
     root.style.height = ;
     root.style.transition = ;
   });
 }

 document.querySelectorAll('.gfl-item').forEach(function (item) {
   item.addEventListener('click', function () { openDetail(item); });
   item.addEventListener('keydown', function (e) {
     if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDetail(item); }
   });
 });

 document.querySelectorAll('.gfl-back-btn').forEach(function (btn) {
   btn.addEventListener('click', function () { closeDetail(btn); });
   btn.addEventListener('keydown', function (e) {
     if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); closeDetail(btn); }
   });
 });

})(); </script>