How to Set Animation on First Element on Loading

How to set animation on first element on loading?

CSS leaves some room for improvement

@Component({
  selector: 'my-app',

  template: `
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES],
  host: { 
    '[class.loaded]': 'isLoaded',
  },
})
@RouteConfig([
  {path: '/',   name: 'Main View',     component: MainViewComponent}
])
export class AppComponent { 
  isLoaded:boolean = false;
  constructor(){}

  ngAfterViewInit() {
    setTimeout(() => this.isLoaded = true, 0);
  }
}

<style>
  my-app {
    visibility: hidden;
    opacity: 0;
  }
  my-app.loaded {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s 2s, opacity 2s linear;
  }
  div.spinner {
    position: absolute;
    top: 150px;
    left: 150px;
  }

  my-app.loaded + div.spinner {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
    background-color: red;
  }
</style>

<body>
  <my-app></my-app>
  <div class="spinner">loading...</div>
</body>

Plunker

css3 transition animation on load?

You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes.

Let's Look at an Example...

Here's a demonstration of a navigation menu sliding into place using CSS3 only:

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

Animation on initial page load only

Use CSS to animate the opacity of the body tag once.

Firefox will remember that the animation ran already, so when you go back to the cached page it won't run again. Other browsers (Chrome) will re-run the animation. To avoid this, you need to key the animation to an ID or class and have a snippet of JavaScript in the body tag to check a cookie.

if(false == /(^|;)\s?first=1\s?($|;)/i.test(document.cookie)) {
    document.body.id="first";
    document.cookie = "first=1; expire= path=/";
}

#first {
    animation: fadeInOnce 1s 1 ease; 
}
    
@keyframes fadeInOnce { 
    0% { 
        display: none; 
        opacity: 0; 
    } 
    100% { 
        display: block; 
        opacity: 1; 
    } 
}

<div id="first">This is content</div>

CSS animation only works for the first element

The issue is that all your input fields have the same id, and thus all your label for="switch" are pointing to the first switch checkbox.

So, you need to have a different id for each switch, and adjust each label's for attribute accordingly. I am not sure how to do this using this particular template engine, but you want to arrive to something like the below.

Side note: You should also have different names for each switch, in order to read each chechbox's value correctly when the form is submitted.

input[type="checkbox"] {
  width: 0;
  height: 0;
  visibility: hidden;
}

label {
  display: block;
  width: 50px;
  height: 30px;
  background-color: rgb(37, 42, 58);
  border-radius: 40px;
  position: relative;
  cursor: pointer;
  transition: 0.5s;
}

label::after {
  content: "";
  width: 15px;
  height: 15px;
  background-color: #eee;
  position: absolute;
  border-radius: 35px;
  top: 7.5px;
  left: 7.5px;
  transition: 0.5s;
}

input:checked+label:after {
  left: calc(100% - 10px);
  transform: translateX(-100%);
}

input:checked+label {
  background-color: #ffc94c;
}

<table class="pure-table pure-table-bordered">
  <thead id="table">
    <tr id="table-heading">
      <th rowspan="2" style="padding: 30px;">
        Name
      </th>
      <th colspan="3" style="border-bottom: 1px solid #cbcbcb">
        Automatic
      </th>
      <th rowspan="2" style="padding: 30px;">
        Last Seen
      </th>
      <th rowspan="2"></th>
    </tr>
    <tr id="table-heading">
      <th>
        Rider
      </th>
      <th>
        Trainer
      </th>
      <th>
        Owner
      </th>
    </tr>
  </thead>
  <tbody>
    <form>
      <tr id="table-cell">
        <td>
          <a class="pure-menu-link" href="#">
           {{  entity["name"]  }}
          </a>
        </td>
        <td>
          <input type="checkbox" name="switch1" id="switch1">
          <label for="switch1"></label>
        </td>
        <td>
          <button id="table-heading" class="pure-button" form="add-row">Edit
          </button>
        </td>
      </tr>
      
      
      <tr id="table-cell">
        <td>
          <a class="pure-menu-link" href="#">
           {{  entity["name"]  }}
          </a>
        </td>
        <td>
          <input type="checkbox" name="switch2" id="switch2">
          <label for="switch2"></label>
        </td>
        <td>
          <button id="table-heading" class="pure-button" form="add-row">Edit
          </button>
        </td>
      </tr>
    </form>
  </tbody>
</table>

Animation for newly rendered elements, but not on page load

Since Angular 4.25 there's an easier way to do this: If you want to suppress an :enter animation on view initialization, just wrap it with the following animation:

template: `
  <div [@preventInitialChildAnimations]>
    <div [@someAnimation]>...</div>
  </div>
`,
animations: [
  trigger('preventInitialChildAnimations', [
    transition(':enter', [
      query(':enter', [], {optional: true})
    ])
  ]),
  ...
]

How to Set Animation on First Element on Loading