Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use CSS transitions and transforms in horizontal scroll #5193

Merged
merged 9 commits into from
Oct 12, 2021
Merged

use CSS transitions and transforms in horizontal scroll #5193

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
32873d3
add parts to horizontal scroller template
radium-v Sep 3, 2021
5538019
move resize-observer and intersection service to utilities
radium-v Sep 15, 2021
a7d42ca
ccalculate framesPerSecond with requestAnimationFrame in horizontal-s…
radium-v Sep 15, 2021
38d6831
use reducer for updateScrollStops in horizontal-scroll
radium-v Sep 15, 2021
9d86c68
use optional chaining and conditional operators in horizontal-scroll
radium-v Sep 15, 2021
abd619c
ensure fps is determined before setting stepcount
radium-v Sep 30, 2021
6109fd7
use transforms and transitions instead
radium-v Oct 12, 2021
3a08296
Change files
radium-v Sep 15, 2021
b6719f4
merge move method into scrollToPosition
radium-v Oct 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
merge move method into scrollToPosition 
- fix playwright test
  • Loading branch information
@radium-v
radium-v committed Oct 12, 2021
commit b6719f4641c2d76b827a71f0a7a1c03457521180
21 changes: 13 additions & 8 deletions packages/web-components/fast-components/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,28 +133,33 @@ describe("FASTHorizontalScroll", function () {
"fast-horizontal-scroll"
)) as ElementHandle<fastHorizontalScroll>;

const doubleWidth = componentWidth * 2;

await element.evaluateHandle(node => node.scrollToNext());

await element.waitForElementState("stable");

const firstXPos = await element.evaluate(node => node.scrollContainer.scrollLeft);

await element.evaluateHandle(node => node.scrollToNext());
await element.evaluateHandle(node => node.scrollToPrevious());

await element.waitForElementState("stable");

await this.page.evaluate(
({ element, componentWidth }) => {
element.style.setProperty("width", `${componentWidth * 2}px`);
},
{ element, componentWidth }
);
await element.evaluateHandle((node, doubleWidth) => {
node.style.setProperty("width", `${doubleWidth}px`);
}, doubleWidth);

await element.waitForElementState("stable");

expect(await element.evaluate(node => node.clientWidth)).to.equal(doubleWidth);

await element.evaluateHandle(node => node.scrollToNext());

await element.waitForElementState("stable");

const secondXPos = await element.evaluate(node => node.scrollContainer.scrollLeft);
const secondXPos = await element.evaluate(
node => node.scrollContainer.scrollLeft
);

expect(firstXPos).to.not.equal(secondXPos);
});
Expand Down
30 changes: 8 additions & 22 deletions packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,21 +428,16 @@ export class HorizontalScroll extends FoundationElement {

this.scrolling = true;

const seconds = Math.abs(newPosition - position) / this.speed;
const seconds =
this.duration ?? `${Math.abs(newPosition - position) / this.speed}s`;

this.move(newPosition, seconds);
}
this.content.style.setProperty("transition-duration", seconds);

/**
* Applies the CSS transition and transform to the content, then sets the
* scroll position for the scroll container.
*
* @param newPosition - position to move towards
* @param duration - The default calculated transition duration in seconds
* @internal
*/
private move(newPosition: number, duration: number): void {
const transitionendHandler = (e?: TransitionEvent) => {
const computedDuration = parseFloat(
getComputedStyle(this.content).getPropertyValue("transition-duration")
);

const transitionendHandler = (e?: TransitionEvent): void => {
if (e && e.target !== e.currentTarget) {
return;
}
Expand All @@ -460,15 +455,6 @@ export class HorizontalScroll extends FoundationElement {
this.scrolling = false;
};

this.content.style.setProperty(
"transition-duration",
this.duration ?? `${duration}s`
);

const computedDuration = parseFloat(
getComputedStyle(this.content).getPropertyValue("transition-duration")
);

if (computedDuration === 0) {
transitionendHandler();
return;
Expand Down