准备就绪后 Polymer 3 中的淡入过渡

Question

我想要 div 元素在加载 Polymer 3 中的视图时淡入。我尝试通过在 div 中添加不透明度为 0 的 css class 来解决这个问题。当聚合物模板准备就绪后，css class 应该被移除并且 css 过渡应该开始（在 2 秒内将不透明度转换为 0），但是过渡没有执行， div 仅在页面加载时可见。

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';

class MyView1 extends PolymerElement {
  static get template() {
    return html`
      <style include="shared-styles">
        :host {
          display: block;
          padding: 10px;
        }

      .card{
        opacity: 1;
        transition: 2s opacity;
      }

      .fade-out {
        opacity: 0;
      }
      </style>
      <button on-click="fadeIn">click</button>
      <div class="card fade-out" id="myCard">
        <div class="circle">1</div>
        <h1>View One</h1>
        <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
        <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
      </div>
    `;
  }


  ready() {
    super.ready();
    console.log("ready");
    this.fadeIn(); //not working
  }

  fadeIn(){
    console.log("fade-in");
    this.$.myCard.classList.remove("fade-out");
  }
}

window.customElements.define('my-view1', MyView1);

Answer 1

我使用了 hidden$ 和标准 css 动画的组合，这也可以与位置结合以获得幻灯片效果等。

<div class="hideable" hidden$="[[!show]]" hidden>

.hideable {
  transition: opacity 0.5s;
}

.hideable[hidden] {
  opacity: 0;
  pointer-events: none;
}

Answer 2

纯CSS溶液：

这是我使用的，是从 SO 那里得到的，虽然我找不到原来的 post。

将它放在共享样式中，并添加类个要在页面过渡时淡出的元素：

  @keyframes fade-in-right {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .card, .otherelementtofade, .yetanotherelementtofade{
      opacity: 0;
      animation: fade-in-right ease 0.4s forwards;
  }

正如 peeh 所说，您可以将其结合起来以包含幻灯片效果：

  @keyframes fade-in-right {
    from {
      opacity: 0;
      transform: translateX(-15px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .card, .otherelementtofade, .yetanotherelementtofade{
      opacity: 0;
      animation: fade-in-right ease 0.4s forwards;
  }

准备就绪后 Polymer 3 中的淡入过渡

Fade-in transistion in polymer 3 when ready

polymer

polymer-3.x