微件: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() || '450px';
   // 先把当前自然高度设为起点，避免从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 list = root.querySelector('.gfl-list');
 // 列表隐藏时 visibility:hidden 但仍占布局，scrollHeight 可读
 var listH = list.scrollHeight;
 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>