js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix indicator animation bug

Browse Source
This commit is contained in:
Cory LaViska
2022-11-29 16:06:52 -05:00
parent a50909d474
commit ee30f7a10b
2 changed files with 2 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/tab-group/tab-group.ts
View File

@@ -73,7 +73,6 @@ export default class SlTabGroup extends ShoelaceElement {
super.connectedCallback();
this.resizeObserver = new ResizeObserver(() => {
this.preventIndicatorTransition();
this.repositionIndicator();
this.updateScrollControls();
});
@@ -344,17 +343,6 @@ export default class SlTabGroup extends ShoelaceElement {
}
}
// In some orientations, when the component is resized, the indicator's position will change causing it to animate
// while you resize. Calling this method will prevent the transition from running on resize, which feels more natural.
preventIndicatorTransition() {
const transitionValue = this.indicator.style.transition;
this.indicator.style.transition = 'none';
requestAnimationFrame(() => {
this.indicator.style.transition = transitionValue;
});
}
// This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
syncTabsAndPanels() {
this.tabs = this.getAllTabs({ includeDisabled: false });