Polymer 准备就绪时聚合物3中的淡入过渡

我希望加载polymer 3中的视图时div元素淡入。我试图通过向div添加一个不透明度为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);

从'@polymer/polymer/polymer element.js'导入{polymerement，html}；
导入“./shared styles.js”；
类MyView1扩展了聚合关系{
静态获取模板（）{
返回html`
：主持人{
显示：块；
填充：10px；
}
.卡片{
不透明度：1；
过渡：2s不透明度；
}
.淡出{
不透明度：0；
}
点击
1.
视图一
Ut的劳动强度最低。劳登·提比克Ut拥有

普利普希特山上的龙舌兰，在诺米纳维山上的龙舌兰，在精英奥波尔特山上的龙舌兰，在诺米纳维山上的龙舌兰，在精英奥波尔特山上的龙舌兰，在埃利普希特山上的龙舌兰，在埃利普希特山上的龙舌兰，在埃利普希特山上的龙舌兰

`;
}
就绪（）{
super.ready（）；
控制台日志（“就绪”）；
this.fadeIn（）；//不工作
}
法代因（）{
控制台日志（“淡入”）；
此.$.myCard.classList.remove（“淡出”）；
}
}
window.customElements.define（'my-view1'，MyView1）；

我使用了

隐藏$

和标准css动画的组合，这也可以与位置组合以获得滑入效果等

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

.hideable {
  transition: opacity 0.5s;
}

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

.隐蔽的{
过渡：不透明度0.5s；
}
.可隐藏的[隐藏的]{
不透明度：0；
指针事件：无；
}

我使用了

隐藏$

和标准css动画的组合，这也可以与位置组合以获得滑入效果等

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

.hideable {
  transition: opacity 0.5s;
}

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

.隐蔽的{
过渡：不透明度0.5s；
}
.可隐藏的[隐藏的]{
不透明度：0；
指针事件：无；
}

纯CSS解决方案：

这是我使用的，也是我从中得到的，尽管我找不到原始的帖子

将其置于共享样式中，并添加要在页面过渡时淡入淡出的元素类：

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

纯CSS解决方案：

这是我使用的，也是我从中得到的，尽管我找不到原始的帖子

将其置于共享样式中，并添加要在页面过渡时淡入淡出的元素类：

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

---

在删除

fadeout

类后，可以声明

div

而不使用

card

类，并将其添加到

fadeIn（）

方法中。在删除

fadeIn

类后，可以声明

div

而不使用

card

类，并将其添加到

fadeIn（）

方法中。