尝试将 crossfade-all 效果更改为 core-animated-pages 组件中的幻灯片效果

Question

我的 polymer-element 中有 core-animated-pages 元素：

<link rel="import" href="../public/components/core-animated-pages/core-animated-pages.html">

<polymer-element name="welcom-arrow" attributes="counter">
<template>
<style>

</style>
<core-animated-pages transitions="cross-fade-all" selected="{{welcomPage}}">
  <section>
    <div class="blueBackground">
      <h1>asd</h1>
      <h3>asdasdasdn</h3>
      <paper-button on-tap="{{Foward}}">
        Keep Going
        <core-icon icon="forward"></core-icon>
      </paper-button>
    </div>
  </section>
  <section>
    <div class="blueBackground">
      welcom 2
    </div>
  </section>
</core-animated-pages>
</template>
<script>
Polymer({
  welcomPage: 0,
  Foward: function() {
    this.welcomPage++;
  },
  Backward: function() {
    this.welcomPage--;
  }
});
</script>
</polymer-element>

我的交叉淡入淡出过渡效果很好，但是当我想通过将 cross-fade-all 属性交换为 slide-from-right 将其更改为幻灯片效果时，效果不起作用。我该如何解决这个问题？

Answer 1

您只需要导入转换本身。

<link rel="import" href="../public/components/core-animated-pages/transitions/slide-from-right.html">

现在您可以更改转换

<core-animated-pages transitions="slide-from-right" selected="{{welcomPage}}">

之前的转换之所以有效，是因为 core-animated-pages 已经导入了它。

希望对您有所帮助！

尝试将 crossfade-all 效果更改为 core-animated-pages 组件中的幻灯片效果

Trying to change cross-fade-all effect to a slide effect in core-animated-pages componenet

polymer