我的 Neon 动画页面不会显示在我的纸质 Material 中。
在这里，您可以在我的基本示例中看到，我的 NEON 动画页面不会显示在纸质 Material 中。 Paper Material 由红色边框勾勒出轮廓。理论上，纸质 Material 应该有一个底部边框，以及沿着右侧和左侧的边框，同时也包含蓝色 div。我最好的猜测是 neon-animated-pages 元素本身的 CSS 规则覆盖了正确的行为。任何帮助将不胜感激，在此先感谢。
基本示例代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/neon-animation/neon-animation.html">
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="bower_components/paper-material/paper-material.html" >
<style>
</style>
</head>
<body fullbleed unresolved vertical>
<test-iron-page></test-iron-page>
</body>
<dom-module id="test-iron-page">
<style is="custom-style">
p {
font-size: 5em;
margin: 0px;
}
paper-material {
margin: 0px;
border: 1px red solid;
}
.bigDiv {
background: rgb(0, 148, 255);
height: 150px;
}
.smallDiv {
background: rgb(0, 255, 144);
height: 40px;
}
</style>
<template>
<paper-material elevation="2">
<div id="headerCont">
<p>Header</p>
</div>
<neon-animated-pages id="nap" selected="0">
<div class="bigDiv">I am a div</div>
<div class="smallDiv">I am a div</div>
</neon-animated-pages>
</paper-material>
</template>
</dom-module>
<script>
Polymer({
is: "test-iron-page"
});
</script>
</html>
最佳答案
指定paper-material的height，下面是height:300px; for paper-material的工作demo 。
<html>
<head>
<title>Template me</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="neon-animation/neon-animation.html">
<link rel="import" href="neon-animation/neon-animated-pages.html">
<link rel="import" href="neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="paper-material/paper-material.html" >
<link rel="import" href="paper-button/paper-button.html" >
</head>
<body fullbleed unresolved vertical>
<test-iron-page></test-iron-page>
</body>
<dom-module id="test-iron-page">
<style is="custom-style">
p {
font-size: 5em;
margin: 0px;
}
paper-material {
margin: 0px;
border: 1px red solid;
height : 300px;
}
.bigDiv {
background: rgb(0, 148, 255);
height: 150px;
}
.smallDiv {
background: rgb(0, 255, 144);
height: 40px;
}
</style>
<template>
<paper-material elevation="2">
<div id="headerCont">
<p>Header</p>
</div>
<neon-animated-pages id="nap" selected="0">
<div class="bigDiv">I am a div</div>
<div class="smallDiv">I am a div</div>
</neon-animated-pages>
</paper-material>
<paper-button raised on-tap="_next">Next Page</paper-button>
</template>
</dom-module>
<script>
Polymer({
is: "test-iron-page",
_next : function(){
this.$.nap.selected = ((this.$.nap.selected+1)%2);
}
});
</script>
</html>关于html - 不在纸质 Material 内的 NEON 动画页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34725264/