import ViewController from './ViewController';

const ViewPage = {

    route: null,

    _awaitTransitionEnd(element) {
        const promise = new Promise(done => element.addEventListener('tranistionend', function callback() {
            element.removeEventListener(callback);

            done();
        }));

        return promise;
    },

    isActive: false,

    animateSlideIn(element) {
        const promise = this._awaitTransitionEnd(element);

        element.classList.add('movePageIn');

        return promise;
    },

    animateSlideOut(element) {
        const promise = this._awaitTransitionEnd();

        element.classList.remove('movePageIn');

        return promise;
    },

    __proto__: ViewController,
};

// add styles to the document
const styleELemen = document.createElement('style');

styleELemen.innerHTML = `
    [slide-page] {
        transition: transform .3s ease-out;
    }

    [slide-page]:not(.movePageIn) {
        transition: transform .3s ease-in;
        transform: translate3d(-100%, 0, 0);
    }
`;

document.body.appendChild(styleELemen);

export default ViewPage;
export { ViewPage };

@@ -39,16 +39,76 @@
 roller';
+%0Aimport %7B RenderEngine %7D from 'application-frame/rendering';
 %0A%0Aconst 
@@ -248,18 +248,18 @@
 er('tran
-i
 s
+i
 tionend'
@@ -322,16 +322,33 @@
 istener(
+'transitionend', 
 callback
@@ -439,16 +439,125 @@
 false,%0A%0A
+    _forceVisible: false,%0A%0A    get isVisible() %7B%0A        return this.isActive %7C%7C this._forceVisible;%0A    %7D,%0A%0A
     anim
@@ -634,24 +634,76 @@
 (element);%0A%0A
+        RenderEngine.scheduleRenderTask(() =%3E %7B%0A    
         elem
@@ -726,32 +726,44 @@
 d('movePageIn');
+%0A        %7D);
 %0A%0A        return
@@ -815,61 +815,474 @@
 ) %7B%0A
-        const promise = this._awaitTransitionEnd();%0A%0A
+%0A        if (!element.classList.contains('movePageIn')) %7B%0A            return true;%0A        %7D%0A%0A        const promise = this._awaitTransitionEnd(element)%0A            .then(() =%3E %7B%0A                this._forceVisible = false;%0A                this.scope.__apply__();%0A            %7D);%0A%0A        // make sure the page stays visible until we are done.%0A        this._forceVisible = true;%0A        this.scope.__apply__();%0A%0A        RenderEngine.schedulePostRenderTask(() =%3E %7B%0A    
     
@@ -1324,16 +1324,28 @@
 ageIn');
+%0A        %7D);
 %0A%0A      
@@ -1695,17 +1695,16 @@
 slate3d(
--
 100%25, 0,

fix ViewPage animations