Fade-in transistion in polymer 3 when ready

Question

I want a div element to be faded in when a view in polymer 3 is loaded. I try to solve this by adding a css class with opacity: 0 to the div. When the polymer template is ready, the css class should be removed and the css transition should start (to transform opacity to 0 within 2 seconds), but the transition is not executed, the div is only visible when page is loaded.

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);

Perhaps declare the `div` without `card` class and add it in the `fadeIn()` method after removing the `fade-out` class. — ain, Aug 05 '18 at 08:49

score 2 · Accepted Answer · answered Aug 06 '18 at 15:28

Pure CSS solution:

This is what I use and got it from SO though I can't find the original post.

Place it in shared-styles and add the classes of the elements you want to fade on page transitions:

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

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

As peeh said, you can combine this to include a slide effect:

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

score 0 · Answer 2 · answered Aug 06 '18 at 13:44

I used a cobination of hidden$ and standard css animations, this can also be combined with position to get slide in effects etc.

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

.hideable {
  transition: opacity 0.5s;
}

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

Fade-in transistion in polymer 3 when ready

2 Answers2