无法使用JS应用核心动画页面转换

时间:2014-12-01 15:57:12

标签: javascript css polymer transitions

尝试将带有聚合物的core-animated-pages元素应用于我的元素时,我遇到了错误。

我搜索了代码中的错误,缺少链接元素,缺少导入,样式,什么都没找到。

这个想法是针对一个小应用程序,一旦你点击登录按钮,在自定义登录框中显示,它将把登录的部分更改为新的。

这是我的代码:

内容page.html中

<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="components/paper-login-box-master/paper-login-box.html">


<polymer-element name="content-page" attributes="sel user pass">

  <template>
    <style>
    #section {
        background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230)) 0% 0% repeat scroll transparent;
      }
      #core_animated_pages {
        width: 100%;
        height: 100%;
        overflow: hidden;
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: rgb(238, 238, 238);
      }
       core-pages-animated transitions {
           width: 100%; 
           height: 100%;
      }
    paper-loginbox {
        margin-top: 50px;
    }
    </style>
    <core-animated-pages selected="{{ sel }}" transitions="fade-scale">
        <section>
            <div layout vertical center  ng-controller="LoginController">
                <paper-loginbox user="{{ user }}" pass="{{ pass }}" on-login="{{ login }}"></paper-loginbox>
            </div>
        </section>
        <section>
            <div center>OLA</div>
        </section>
    </core-animated-pages>
  </template>

    <!--
    <script>
        var tabs = document.querySelector('paper-tabs');

        tabs.addEventListener('core-select', function() {
            console.log("Selected: " + tabs.selected);
        });
    </script>
    -->


  <script>

    Polymer({
        sel: 0,
        user: "",
        pass: "",
        login: function() {
        this.fire("login");
        },
        ngMapping: {
            ngSel: {
                primitive: 'sel'
            },
            ngUser: {
                primitive: 'user'
            },
            ngPass: {
                primitive: 'pass'
            },
            ngLogin: {
                event: "login"
            }
        }
    });

  </script>

</polymer-element>

index.html我调用元素并更改所选

的值
<!DOCTYPE html>
<html ng-app="loginApp">
    <head>
        <title>RecordStore - A sua loja de albuns preferida</title>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
        <meta name="description" content="Encomenda de albuns (Fictício)" />

        <script src="components/webcomponentsjs/webcomponents.js">
        </script>

        <link rel="import" href="components/polymer/polymer.html">
        <link rel="import" href="components/font-roboto/roboto.html">
        <link rel="import" href="components/core-scroll-header-panel/core-scroll-header-panel.html">
        <link rel="import" href="components/core-toolbar/core-toolbar.html">
        <link rel="import" href="components/paper-tabs/paper-tabs.html">
        <link rel="import" href="components/core-icon/core-icon.html">
        <link rel="import" href="components/core-icons/social-icons.html">
        <link rel="import" href="components/core-icon-button/core-icon-button.html">

        <link rel="import" href="content-page.html">

        <style>
            html,body {
                height: 100%;
                margin: 0;
                background-color: #E5E5E5;
                font-family: 'RobotoDraft', sans-serif;
            }
            #core_scroll_header_panel {
                width: 100%;
                height: 100%;
                position: absolute;
            }
            core-toolbar {
                background: #800000;
                color: white;
            }
            #tabs {
                width: 100%;
                margin: 0;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                text-transform: uppercase;
            }
            paper-loginbox {
                margin-top: 50px;
            }
        </style>

    </head>

    <body unresolved>
        <core-scroll-header-panel headermargin="85.33333333333334" keepcondensedheader headerheight="128" id="core_scroll_header_panel" >

            <core-toolbar id="core_toolbar" class="medium-tall" layout horizontal>
                <div class="bottom">
                    <core-icon icon="store"></core-icon>
                    <paper-item disabled>Loja</paper-item>
                    <!--
                    <core-icon-button icon="post-github"></core-icon-button>
                    <paper-tabs id="tabs" selected="all"  center horizontal layout class="bottom fit">
                        <paper-tab name="all" layout horizontal center-center flex inline active>All</paper-tab>
                        <paper-tab name="favorites" layout horizontal center-center flex inline active>Favorites</paper-tab>
                    </paper-tabs>
                    -->
                </div>
            </core-toolbar>
            <content-page ng-polymer ng-sel="coise" ng-user="user" ng-pass="upass" ng-login="onlogin()"></content-page>
        </core-scroll-header-panel>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
        <script src="ng-polymer-elements-master/ng-polymer-elements.min.js"></script>

        <script>
            angular.module('loginApp', ['ng-polymer-elements'])
              .controller('LoginController', ['$scope', function($scope) {
                $scope.user = "lala";

                $scope.onlogin = function() {
                    $scope.upass = $scope.user;
                    $scope.coise = 1;
                };
              }]);
        </script>
    </body>

</html>

这是我收到的错误:

Exception caught during observer callback: TypeError: Cannot read property 'classList' of undefined
    at core-animated-pages.Polymer.applySelection (http://localhost/components/core-selector/core-selector.html:454:15)
    at core-animated-pages.Polymer.selectedItemChanged (http://localhost/components/core-animated-pages/core-animated-pages.html:418:14)
    at core-animated-pages.properties.invokeMethod (http://localhost/components/polymer/polymer.js:9355:12)
    at core-animated-pages.properties.notifyPropertyChanges (http://localhost/components/polymer/polymer.js:9344:20)
    at Object.Observer.report_ (http://localhost/components/polymer/polymer.js:4890:24)
    at Object.createObject.check_ (http://localhost/components/polymer/polymer.js:5296:12)
    at callback (http://localhost/components/polymer/polymer.js:4788:20)

1 个答案:

答案 0 :(得分:1)

我看到你正在导入slide-from-right.html,但是你使用transitions =“fade-scale”(未定义为core-animated-pages transition)。您需要导入要使用的每个转换,并在转换列表中用空格分隔它们:

<link rel="import" href="components/core-animated-pages/transitions/cross-fade.html">, 
<link rel="import" href="components/core-animated-pages/transitions/scale-up.html">,

...

<core-animated-pages selected="{{ sel }}" transitions="cross-fade scale-up">