如何在 Angular 中读取带有过渡的元素样式？

Question

我有一个元素，我在组件内更改宽度。此元素具有宽度的 CSS 属性转换。我想在元素宽度达到“100%”时调用一个函数。我知道我可以使用此代码this._expBar.nativeElement.style.width 获取宽度值。问题是这将返回我设置的宽度而不是当前宽度。我可以阅读考虑到过渡的 CSS 属性的当前状态吗？或者至少我可以读到现在是否正在发生任何转变？

Answer 1

您可以使用transition 事件

1. transitionrun 过渡效果开始时即使有延迟。
2. transitionstart 延迟后执行。
3. transitioncancel 在转换取消时执行。
4. transitionend 在转换结束时执行。

   例如

   const message = document.querySelector('.message');
   const el = document.querySelector('.transition');
   
   el.addEventListener('transitionrun', () => {
     message.textContent = 'transitionrun fired';
   });
   
   el.addEventListener('transitionstart', () => {
     message.textContent = 'transitionstart fired';
   });
   
   el.addEventListener('transitioncancel', () => {
     message.textContent = 'transitioncancel fired';
   });
   
   el.addEventListener('transitionend', () => {
     message.textContent = 'transitionend fired';
   });

   .transition {
     width: 100px;
     height: 100px;
     background: rgba(255, 0, 0, 1);
     transition-property: transform, background;
     transition-duration: 2s;
     transition-delay: 1s;
   }
   
   .transition:hover {
     transform: rotate(90deg);
     background: rgba(255, 0, 0, 0);
   }

   <div class="transition">Hover over me</div>
   <div class="message"></div>