手风琴展开时如何同步升降相邻的元素？

Question

TL; DR

我的Material手风琴上面有一个div。当手风琴打开时，我希望上层div随着手风琴的增高和降低而粘在手风琴的边缘，而不是被手风琴覆盖。

关闭

展开-橙色点应仍在图形内。

我尝试过的事情

如何获取上div的位置以保持更新？不知道如何让“页面”听这种手风琴的打开/关闭动作，我认为过渡事件就是这样。但是我无法触发转换事件。

我一直在尝试这样的事情（因为没有工作示例，所以是伪代码）

      //get top of lower elem/accordion before 
let topBefore = accordionOnBottom.getBoundingClientRect().top
    //top of upper elem before
let bottomBefore = elemOnTop.getBoundingClientRect().bottom

accordionOnBottom.addEventListener('transition(of some kind)', () => {

   //when closer to the top, reassign
  if(accordionOnBottom.getBoundingClientRect().top < topBefore){

     let upperDiff = topBefore - getBoundingClientRect().top
     let lowerDiff = bottomBefore + upperDiff
     lowerDiff = diff.toString() + 'px'
     elemOnTop.style.bottom = lowerDiff

  }
})

复制

要复制，需要dev工具和官方的docs。手风琴抽屉包括一堆带有过渡的div。在开发工具元素标签中将#test之类的ID添加到.ja472eb div中，该ID可以很容易地用inspect进行定位，然后在控制台中添加一个侦听器。但是什么也没发生。

document.querySelector('#test').addEventListener('transitionend', () => { console.log('done')})

我将侦听器附加到哪个元素上都没有关系，它仍然不会触发。

我也尝试过使用超时，但是我错过了收听的方式。