mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

remove transform from animations

pull/1050/head
Cory LaViska 2022-12-01 15:38:59 -05:00
rodzic d2f1b50ad0
commit c6a044416a
8 zmienionych plików z 47 dodań i 47 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
src/components/alert/alert.ts
Wyświetl plik

@ -225,16 +225,16 @@ export default class SlAlert extends ShoelaceElement {
setDefaultAnimation('alert.show', { setDefaultAnimation('alert.show', {
keyframes: [ keyframes: [
{ opacity: 0, transform: 'scale(0.8)' }, { opacity: 0, scale: 0.8 },
{ opacity: 1, transform: 'scale(1)' } { opacity: 1, scale: 1 }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
setDefaultAnimation('alert.hide', { setDefaultAnimation('alert.hide', {
keyframes: [ keyframes: [
{ opacity: 1, transform: 'scale(1)' }, { opacity: 1, scale: 1 },
{ opacity: 0, transform: 'scale(0.8)' } { opacity: 0, scale: 0.8 }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });

10
src/components/dialog/dialog.ts
Wyświetl plik

@ -311,22 +311,22 @@ export default class SlDialog extends ShoelaceElement {
setDefaultAnimation('dialog.show', { setDefaultAnimation('dialog.show', {
keyframes: [ keyframes: [
{ opacity: 0, transform: 'scale(0.8)' }, { opacity: 0, scale: 0.8 },
{ opacity: 1, transform: 'scale(1)' } { opacity: 1, scale: 1 }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
setDefaultAnimation('dialog.hide', { setDefaultAnimation('dialog.hide', {
keyframes: [ keyframes: [
{ opacity: 1, transform: 'scale(1)' }, { opacity: 1, scale: 1 },
{ opacity: 0, transform: 'scale(0.8)' } { opacity: 0, scale: 0.8 }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
setDefaultAnimation('dialog.denyClose', { setDefaultAnimation('dialog.denyClose', {
keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' }], keyframes: [{ scale: 1 }, { scale: 1.02 }, { scale: 1 }],
options: { duration: 250 } options: { duration: 250 }
}); });

50
src/components/drawer/drawer.ts
Wyświetl plik

@ -343,16 +343,16 @@ export default class SlDrawer extends ShoelaceElement {
// Top // Top
setDefaultAnimation('drawer.showTop', { setDefaultAnimation('drawer.showTop', {
keyframes: [ keyframes: [
{ opacity: 0, transform: 'translateY(-100%)' }, { opacity: 0, translate: '0 -100%' },
{ opacity: 1, transform: 'translateY(0)' } { opacity: 1, translate: '0 0' }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
setDefaultAnimation('drawer.hideTop', { setDefaultAnimation('drawer.hideTop', {
keyframes: [ keyframes: [
{ opacity: 1, transform: 'translateY(0)' }, { opacity: 1, translate: '0 0' },
{ opacity: 0, transform: 'translateY(-100%)' } { opacity: 0, translate: '0 -100%' }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
@ -360,24 +360,24 @@ setDefaultAnimation('drawer.hideTop', {
// End // End
setDefaultAnimation('drawer.showEnd', { setDefaultAnimation('drawer.showEnd', {
keyframes: [ keyframes: [
{ opacity: 0, transform: 'translateX(100%)' }, { opacity: 0, translate: '100%' },
{ opacity: 1, transform: 'translateX(0)' } { opacity: 1, translate: '0' }
], ],
rtlKeyframes: [ rtlKeyframes: [
{ opacity: 0, transform: 'translateX(-100%)' }, { opacity: 0, translate: '-100%' },
{ opacity: 1, transform: 'translateX(0)' } { opacity: 1, translate: '0' }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
setDefaultAnimation('drawer.hideEnd', { setDefaultAnimation('drawer.hideEnd', {
keyframes: [ keyframes: [
{ opacity: 1, transform: 'translateX(0)' }, { opacity: 1, translate: '0' },
{ opacity: 0, transform: 'translateX(100%)' } { opacity: 0, translate: '100%' }
], ],
rtlKeyframes: [ rtlKeyframes: [
{ opacity: 1, transform: 'translateX(0)' }, { opacity: 1, translate: '0' },
{ opacity: 0, transform: 'translateX(-100%)' } { opacity: 0, translate: '-100%' }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
@ -385,16 +385,16 @@ setDefaultAnimation('drawer.hideEnd', {
// Bottom // Bottom
setDefaultAnimation('drawer.showBottom', { setDefaultAnimation('drawer.showBottom', {
keyframes: [ keyframes: [
{ opacity: 0, transform: 'translateY(100%)' }, { opacity: 0, translate: '0 100%' },
{ opacity: 1, transform: 'translateY(0)' } { opacity: 1, translate: '0 0' }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
setDefaultAnimation('drawer.hideBottom', { setDefaultAnimation('drawer.hideBottom', {
keyframes: [ keyframes: [
{ opacity: 1, transform: 'translateY(0)' }, { opacity: 1, translate: '0 0' },
{ opacity: 0, transform: 'translateY(100%)' } { opacity: 0, translate: '0 100%' }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
@ -402,31 +402,31 @@ setDefaultAnimation('drawer.hideBottom', {
// Start // Start
setDefaultAnimation('drawer.showStart', { setDefaultAnimation('drawer.showStart', {
keyframes: [ keyframes: [
{ opacity: 0, transform: 'translateX(-100%)' }, { opacity: 0, translate: '-100%' },
{ opacity: 1, transform: 'translateX(0)' } { opacity: 1, translate: '0' }
], ],
rtlKeyframes: [ rtlKeyframes: [
{ opacity: 0, transform: 'translateX(100%)' }, { opacity: 0, translate: '100%' },
{ opacity: 1, transform: 'translateX(0)' } { opacity: 1, translate: '0' }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
setDefaultAnimation('drawer.hideStart', { setDefaultAnimation('drawer.hideStart', {
keyframes: [ keyframes: [
{ opacity: 1, transform: 'translateX(0)' }, { opacity: 1, translate: '0' },
{ opacity: 0, transform: 'translateX(-100%)' } { opacity: 0, translate: '-100%' }
], ],
rtlKeyframes: [ rtlKeyframes: [
{ opacity: 1, transform: 'translateX(0)' }, { opacity: 1, translate: '0' },
{ opacity: 0, transform: 'translateX(100%)' } { opacity: 0, translate: '100%' }
], ],
options: { duration: 250, easing: 'ease' } options: { duration: 250, easing: 'ease' }
}); });
// Deny close // Deny close
setDefaultAnimation('drawer.denyClose', { setDefaultAnimation('drawer.denyClose', {
keyframes: [{ transform: 'scale(1)' }, { transform: 'scale(1.01)' }, { transform: 'scale(1)' }], keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],
options: { duration: 250 } options: { duration: 250 }
}); });

8
src/components/dropdown/dropdown.ts
Wyświetl plik

@ -441,16 +441,16 @@ export default class SlDropdown extends ShoelaceElement {
setDefaultAnimation('dropdown.show', { setDefaultAnimation('dropdown.show', {
keyframes: [ keyframes: [
{ opacity: 0, transform: 'scale(0.9)' }, { opacity: 0, scale: 0.9 },
{ opacity: 1, transform: 'scale(1)' } { opacity: 1, scale: 1 }
], ],
options: { duration: 100, easing: 'ease' } options: { duration: 100, easing: 'ease' }
}); });
setDefaultAnimation('dropdown.hide', { setDefaultAnimation('dropdown.hide', {
keyframes: [ keyframes: [
{ opacity: 1, transform: 'scale(1)' }, { opacity: 1, scale: 1 },
{ opacity: 0, transform: 'scale(0.9)' } { opacity: 0, scale: 0.9 }
], ],
options: { duration: 100, easing: 'ease' } options: { duration: 100, easing: 'ease' }
}); });

4
src/components/range/range.ts
Wyświetl plik

@ -232,10 +232,10 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont
// off depending on the size of the control, thumb, and tooltip dimensions. // off depending on the size of the control, thumb, and tooltip dimensions.
if (isRtl) { if (isRtl) {
const x = `${inputWidth - percentAsWidth}px + ${percent} * ${thumbSize}`; const x = `${inputWidth - percentAsWidth}px + ${percent} * ${thumbSize}`;
this.output.style.transform = `translateX(calc((${x} - ${tooltipWidth / 2}px - ${thumbSize} / 2)))`; this.output.style.translate = `calc((${x} - ${tooltipWidth / 2}px - ${thumbSize} / 2))`;
} else { } else {
const x = `${percentAsWidth}px - ${percent} * ${thumbSize}`; const x = `${percentAsWidth}px - ${percent} * ${thumbSize}`;
this.output.style.transform = `translateX(calc(${x} - ${tooltipWidth / 2}px + ${thumbSize} / 2))`; this.output.style.translate = `calc(${x} - ${tooltipWidth / 2}px + ${thumbSize} / 2)`;
} }
} }
} }

2
src/components/tab-group/tab-group.styles.ts
Wyświetl plik

@ -24,7 +24,7 @@ export default css`
.tab-group__indicator { .tab-group__indicator {
position: absolute; position: absolute;
transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease; transition: var(--sl-transition-fast) translate ease, var(--sl-transition-fast) width ease;
} }
.tab-group--has-scroll-controls .tab-group__nav-container { .tab-group--has-scroll-controls .tab-group__nav-container {

4
src/components/tab-group/tab-group.ts
Wyświetl plik

@ -331,14 +331,14 @@ export default class SlTabGroup extends ShoelaceElement {
case 'bottom': case 'bottom':
this.indicator.style.width = `${width}px`; this.indicator.style.width = `${width}px`;
this.indicator.style.height = 'auto'; this.indicator.style.height = 'auto';
this.indicator.style.transform = isRtl ? `translateX(${-1 * offset.left}px)` : `translateX(${offset.left}px)`; this.indicator.style.translate = isRtl ? `${-1 * offset.left}px` : `${offset.left}px`;
break; break;
case 'start': case 'start':
case 'end': case 'end':
this.indicator.style.width = 'auto'; this.indicator.style.width = 'auto';
this.indicator.style.height = `${height}px`; this.indicator.style.height = `${height}px`;
this.indicator.style.transform = `translateY(${offset.top}px)`; this.indicator.style.translate = `${offset.top}px`;
break; break;
} }
} }

8
src/components/tooltip/tooltip.ts
Wyświetl plik

@ -302,16 +302,16 @@ export default class SlTooltip extends ShoelaceElement {
setDefaultAnimation('tooltip.show', { setDefaultAnimation('tooltip.show', {
keyframes: [ keyframes: [
{ opacity: 0, transform: 'scale(0.8)' }, { opacity: 0, scale: 0.8 },
{ opacity: 1, transform: 'scale(1)' } { opacity: 1, scale: 1 }
], ],
options: { duration: 150, easing: 'ease' } options: { duration: 150, easing: 'ease' }
}); });
setDefaultAnimation('tooltip.hide', { setDefaultAnimation('tooltip.hide', {
keyframes: [ keyframes: [
{ opacity: 1, transform: 'scale(1)' }, { opacity: 1, scale: 1 },
{ opacity: 0, transform: 'scale(0.8)' } { opacity: 0, scale: 0.8 }
], ],
options: { duration: 150, easing: 'ease' } options: { duration: 150, easing: 'ease' }
}); });