Skip to content

Commit

Permalink
Fix positions when scrolling in container.
Browse files Browse the repository at this point in the history
  • Loading branch information
@riccoarntz
riccoarntz committed May 31, 2019
1 parent bb86e87 commit fdc1f54
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 112 deletions.
225 changes: 113 additions & 112 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,162 +14,163 @@
<h1 class="site-header-title">Muban <span>Transition Component</span></h1>
</nav>

<div class="page-holder">
<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<div class="site-holder">
<div class="page-holder">
<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>

<span class="dummy-foo-bg abs-fill js-background">
<div class="progress js-progress"></div>
</span>

<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>

<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
<button class="close-button button js-button-close">X</button>
</div>
</section>

<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>

<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
<button class="close-button button js-button-close">X</button>
</div>
</section>

<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<span class="dummy-foo-bg abs-fill js-background">
<div class="progress js-progress"></div>
</span>

<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>

<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>
<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>

<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">
<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">

<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>
<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>

<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<span class="dummy-foo-bg abs-fill js-background">
<div class="progress js-progress"></div>
</span>

<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>

<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>
<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>

<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">
<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">

<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>
<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>

<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<span class="dummy-foo-bg abs-fill js-background">
<div class="progress js-progress"></div>
</span>

<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>

<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>
<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>

<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">
<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">

<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>
<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>

<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<span class="dummy-foo-bg abs-fill js-background">
<div class="progress js-progress"></div>
</span>

<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>

<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>
<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>

<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">
<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">

<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>
<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>

<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<section
data-component="dummy-foo"
class="dummy-foo"
data-scroll-component>
<span class="dummy-foo-bg abs-fill js-background">
<div class="progress js-progress"></div>
</span>

<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>
<div class="abs-center js-text-content">
<h1 class="heading-01">Scroll Transition</h1>
<button data-component="primary-button" class="primary-button button js-button-open">Open popup</button>
<button data-component="primary-button" class="primary-button button js-button-open-2">Open popup 2</button>

<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>
<h2 class="looping-animation-title heading-03 js-looping-title">Looping Animation</h2>
<div class="looping-animation js-loop-animation"></div>
</div>

<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">

<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>
<div
data-component="dummy-foo-popup"
class="dummy-foo-popup abs-center">

<button class="close-button button js-button-close">X</button>
<h2 class="heading-02 abs-center js-title">Regular Transition</h2>
</div>
</section>
</div>
</div>
</div>

Expand Down
1 change: 1 addition & 0 deletions example/src/App.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default class App extends CoreComponent{
static displayName: string = 'app-root';

public scrollTrackerComponentManager: ScrollTrackerComponentManager<IMubanTransitionMixin> = new ScrollTrackerComponentManager<IMubanTransitionMixin>({
container: window,
inViewProgressEnabled: true,
setDebugLabel: true,
debugBorderColor: 'red',
Expand Down
1 change: 1 addition & 0 deletions example/src/component/block/DummyFoo/DummyFoo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import mubanTransitionCoreMixin from '../../../../../src/lib/mixin/MubanTransiti

export default class DummyFoo extends mubanTransitionMixin(mubanTransitionCoreMixin(CoreComponent)) {
static displayName: string = 'dummy-foo';
public enterViewThreshold:number = 0;
// public transitionController: DummyFooTransitionController;

// private dummyFooPopup: DummyFoo;
Expand Down
15 changes: 15 additions & 0 deletions example/src/style/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,22 @@ h1,h2,h3,h4 {
}

.page-holder {
position: relative;
/*overflow: auto;*/
/*height: 100%;*/
}

.app {
height: 100%;
}
.site-holder {
padding-top: 55px;
/*margin-top: 55px;*/
/*height: 100%;*/
}

body {
/*overflow: hidden;*/
}

.block-component {
Expand Down
1 change: 1 addition & 0 deletions tsconfig.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"compilerOptions": {
"strict": true,
"allowJs": false,
"allowSyntheticDefaultImports": true,
"baseUrl": "./src/",
Expand Down

0 comments on commit fdc1f54

Please sign in to comment.