Animatable automatic set opacity to 0 first time, why ?

[ignacio...@gmail.com]

Hi,

When I enter to a page with animation, first time I see blank because opacity :0

<template is="dom-bind">

    <neon-animated-pages style="height: 100%" id="pages" selected="0" entry-animation="slide-from-bottom-animation"
                         exit-animation="slide-down-animation">

    <neon-animatable>
        <section id="land_p">
            <paper-tabs selected="0" id="discover_tabs" style="margin-right: 150px">
    <paper-tab class="tab_item" onclick="moveTo(4)" >Brands</paper-tab>
    <paper-tab class="tab_item" onclick="moveTo(3)">Artists</paper-tab>
    <paper-tab class="tab_item" onclick="moveTo(2)">Mission</paper-tab>
    <paper-tab class="tab_item" onclick="moveTo(1)">About</paper-tab>
</paper-tabs>
         </section>
    </section>
     </neon-animatable>
    <neon-animatable>
        <section id="about_p" style="width: 100%;">
<c-paper-icon-button class="back_to_home_button" icon="arrow_back" onclick="document.querySelector('neon-animated-pages').selected=0"></c-paper-icon-button>
        </section>
    </neon-animatable>
    <neon-animatable>
        <section id="mission_p" style="width: 100%;">
            <div ui-view="mission" style="overflow-y: auto;height: 100%" ></div>
        </section>
    </neon-animatable>
    <neon-animatable>
        <section id="artists_p" style="width: 100%;">

        </section>
    </neon-animatable>
    <neon-animatable >
        <section id="brands_p" style="width: 100%;">
            <div ui-view="brands" style="overflow-y: auto;height: 100%" ></div>
        </section>
    </neon-animatable>
    <neon-animatable>
        <section id="how_p" style="width: 100%;">
            <div ui-view="how" style="overflow-y: auto;height: 100%" ></div>
        </section>-->
    </neon-animatable>

</neon-animated-pages>
</template>
<script>
    function moveTo(p){
        document.querySelector('neon-animated-pages').selected=p;
    }
</script>

Also, If I add a paper-drawe-panel in one of the neon-animatable, the draw is not working.

any idea?

thanks!

[ignacio...@gmail.com]

Also, I want to add something.

I reduced the issue with the paper-drawer-panel to the minimal one and here  my question is , how can I manage the animations? because it seems that the paper-drawe uses the neo-animated-pages animation, so the effect of open-close drawer is destroyed.

I add the following to the previous example

<neon-animatable>

<paper-drawer-panel right-drawer force-narrow drawer-width="358px" disable-swipe>
<div class="landing_drawer" drawer>
    aaaa
<!--<div ng-show="landingMenu=='login'" >-->
<!--<h2>We’re in beta.</h2>-->
<!--<h3>Join us today.</h3>-->
<!--<p>Welcome to the all-new Cuelr beta, the worlds-->
<!--most advanced  music search and discovery-->
<!--engine for music consumers and professionals.</p>-->
<!--<p>Years of working in the music industry,-->
<!--continuously challenging the status quo and-->
<!--reimagining the way we discover new music,-->
<!--helped us to shape Cuelr.</p>-->
<!--<p>-->
<!--Now the beta is available to our community-->
<!--of early members!-->
<!--</p>-->
<!--<p>-->
<!--Join us today to experience a new and unique-->
<!--marketplace to discover the latest trends in-->
<!--music from around the world and submit your-->
<!--feedback to help further improve the service.-->
<!--</p>-->
<!--<p>-->
<!--We look forward to hearing from you!-->
<!--</p>-->
<!--<paper-button class="big button" style="margin-top: 38px;margin-bottom:20px;border: 2px solid #333333;color: #333333;width: 297px;" ng-click="closeTutorial('map')">Request Login</paper-button>-->
<!--<p style="text-align: center">-->
<!--Already have an acount - <a><b>Log in</b></a>-->
<!--</p>-->
<!--<p style="text-align: center;padding-bottom: 0">By signing up, I agree to Cuelr’s</p>-->
<!--<p style="text-align: center;padding-bottom: 0">-->
<!--<a ui-sref="info({section: 'terms_of_service'})"><b>Terms of Service</b></a> and-->
<!--<a ui-sref="info({section: 'privacy_policy'})"><b>Privacy Policy</b></a>.-->
<!--</p>-->
<!--</div>-->

<!--<div ng-show="landingMenu=='signup'" >-->
<!--<h2><b>Sign up</b></h2>-->
<!--<h3>It’s totally free</h3>-->
<!--<paper-button class="big button" style="background-color:#3b5998;color: #ffffff;width: 297px;" ng-click="closeTutorial('map')">sign in with Facebook</paper-button>-->
<!--<paper-button class="big button" style="margin-top: 10px;background-color:#55acee;margin-bottom:20px;color: #ffffff;width: 297px;" ng-click="closeTutorial('map')">sign in with Twitter</paper-button>-->

<!--<div class="horizontal layout center" style="margin: 0;padding: 0">-->
<!--<div  class="line flex"></div>-->
<!--<p style="padding: 0 16px">or</p>-->
<!--<div  class="line flex"></div>-->
<!--</div>-->
<!--<p style="text-align: center"> Register with your email address </p>-->
<!--<paper-input-decorator class="settings_input password_field signup_input required layout vertical" label="Password" > <input type="password" is="core-input" ng-model="credentials.fullName" class="ng-pristine ng-untouched ng-valid" placeholder="Full Name" aria-label="Full Name"> </paper-input-decorator>-->
<!--<paper-input-decorator class="settings_input email_field signup_input required layout vertical" label="Email or username" > <input is="core-input" ng-model="credentials.username" class="ng-pristine ng-untouched ng-valid" placeholder="Email" aria-label="Email"> </paper-input-decorator>-->
<!--<paper-input-decorator class="settings_input password_field signup_input required layout vertical" label="Password" > <input type="password" is="core-input" ng-model="credentials.password" class="ng-pristine ng-untouched ng-valid" placeholder="Password" aria-label="Password"> </paper-input-decorator>-->

<!--<paper-button style="margin-bottom:0;margin-top:6px" class="signin_button button pink_button big" ng-click="login()" role="button" tabindex="0">Sign In</paper-button>-->
<!--<p style="text-align: center">-->
<!--Already have an acount - <a><b>Log in</b></a>-->
<!--</p>-->
<!--<p style="text-align: center;padding-bottom: 0">Which account type is right for me?</p>-->
<!--<p style="text-align: center;padding-bottom: 0">Already have an account - <a>Log in</a>-->
<!--</p>-->
<!--</div>-->
</div>
<div main >
    vvvv
    <a onclick="document.querySelector('paper-drawer-panel').togglePanel();">ssss</a>
</div>
</paper-drawer-panel>
</neon-animatable>

 

When I clicked on the link to toogle the panel, the animation are not the right for the drawer, it is using the parent one from the neon-animated-pages

best!