Question

我希望在加载聚合物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);

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

Answer 2

我使用了hidden$和标准css动画的组合，也可以将其与位置组合起来以获取效果的幻灯片等。

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

.hideable {
  transition: opacity 0.5s;
}

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

准备好后，聚合物3中的渐入晶体管

2 个答案: