我在尝试将带有 polymer 的 core-animated-pages 元素应用到我的元素时遇到错误。
我搜索了代码中的错误、缺少链接元素、缺少导入、样式，但一无所获。
这个想法是针对一个小应用程序，一旦您点击登录按钮(显示在自定义登录框中)，它会将登录所在的部分更改为新的部分。
这是我的代码:
内容页面.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)
最佳答案
我看到您正在导入 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">关于javascript - 无法使用 JS 应用核心动画页面转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27232170/