文章/答案/技术大牛

发布

社区首页 >问答首页 >聚合物核心-动画页面过渡

问聚合物核心-动画页面过渡
EN

Stack Overflow用户

提问于 2014-07-10 17:02:20

回答 2查看 4.7K关注 0票数 0

我试着理解核心动画页面，但我不明白我在哪里失败了。我用http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages实现了第一个演示的两个演示示例

但是转换不起作用！问题出在哪？？这是代码

        <!doctype html>
        <html>
        <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

      <script src="components/platform/platform.js"></script>
      <link href="components/core-animated-pages/core-animated-pages.html" rel="import">
      <link href="components/core-animated-pages/transitions/cross-fade.html" rel="import">
      <link href="components/core-animated-pages/transitions/slide-from-right.html" rel="import">
      <link href="components/core-animated-pages/transitions/hero-transition.html" rel="import">

      <style>
      #hero1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 300px;
        background-color: orange;
      }
      #hero2 {
        position: absolute;
        top: 200px;
        left: 300px;
        width: 300px;
        height: 300px;
        background-color: orange;
      }
      #bottom1, #bottom2 {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        height: 50px;
      }
      #bottom1 {
        background-color: blue;
      }
      #bottom2 {
        background-color: green;
      }
    </style>
    <!-- // hero-transition and cross-fade are declared elsewhere -->
        <core-animated-pages transitions="hero-transition cross-fade">
          <section id="page1">
            <div id="hero1" hero-id="hero" hero></div>
            <div id="bottom1" cross-fade></div>
          </section>
          <section id="page2">
            <div id="hero2" hero-id="hero" hero></div>
            <div id="bottom2" cross-fade></div>
          </section>
        </core-animated-pages>

      <script>
        document.addEventListener('click', function(e) {
        var pages = document.querySelector('core-animated-pages');
        pages.selected = (pages.selected + 1) % pages.children.length;
      });
      </script>
    </body>
    </html>

谢谢

polymer

material-design

回答 2

Stack Overflow用户

发布于 2014-07-10 18:47:48

您是否将聚合物/核心样式的模块添加到您的项目中？如果没有它，我会得到一个未捕获的ReferenceError:没有定义CoreStyle，并且没有渲染任何过渡动画。

票数 2

Stack Overflow用户

发布于 2014-08-14 04:56:15

您只是忘了在core-pages-animated转换中设置大小，在CSS中实现以下代码

core-pages-animated transitions {
    width: 100%; 
    height: 100%;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24672457

复制

相似问题

问聚合物核心-动画页面过渡
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物核心-动画页面过渡EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物核心-动画页面过渡
EN