聚合物 3 准备就绪时的淡入过渡答案

【问题标题】：Fade-in transistion in polymer 3 when ready聚合物 3 准备就绪时的淡入过渡
【发布时间】：2019-01-12 12:46:23
【问题描述】：

我希望在加载聚合物 3 中的视图时淡入 div 元素。我尝试通过在 div 中添加一个 opacity: 0 的 css 类来解决这个问题。聚合物模板准备好后，应删除 css 类并开始 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);

【问题讨论】：

也许声明 div 没有 card 类，并在删除 fade-out 类后将其添加到 fadeIn() 方法中。

标签： polymer polymer-3.x

【解决方案1】：

纯 CSS 解决方案：

这是我使用并从 SO 获得的，虽然我找不到原始帖子。

将它放在共享样式中，并添加要在页面转换中淡入淡出的元素的类：

  @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;
  }

【讨论】：

【解决方案2】：

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

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

.hideable {
  transition: opacity 0.5s;
}

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

【讨论】：