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', {
keyframes: [
{ opacity: 0, transform: 'scale(0.8)' },
{ opacity: 1, transform: 'scale(1)' }
{ opacity: 0, scale: 0.8 },
{ opacity: 1, scale: 1 }
],
options: { duration: 250, easing: 'ease' }
});
setDefaultAnimation('alert.hide', {
keyframes: [
{ opacity: 1, transform: 'scale(1)' },
{ opacity: 0, transform: 'scale(0.8)' }
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0.8 }
],
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', {
keyframes: [
{ opacity: 0, transform: 'scale(0.8)' },
{ opacity: 1, transform: 'scale(1)' }
{ opacity: 0, scale: 0.8 },
{ opacity: 1, scale: 1 }
],
options: { duration: 250, easing: 'ease' }
});
setDefaultAnimation('dialog.hide', {
keyframes: [
{ opacity: 1, transform: 'scale(1)' },
{ opacity: 0, transform: 'scale(0.8)' }
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0.8 }
],
options: { duration: 250, easing: 'ease' }
});
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 }
});

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

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

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

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

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

@ -331,14 +331,14 @@ export default class SlTabGroup extends ShoelaceElement {
case 'bottom':
this.indicator.style.width = `${width}px`;
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;
case 'start':
case 'end':
this.indicator.style.width = 'auto';
this.indicator.style.height = `${height}px`;
this.indicator.style.transform = `translateY(${offset.top}px)`;
this.indicator.style.translate = `${offset.top}px`;
break;
}
}

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

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