aurelia-animator-css/test/fixtures/animation.html

An implementation of the abstract Animator interface from templating which enables css-based animations.

<style type="text/css">
  @keyframes increase-size {
    from { height: 0px; }
    to { height: 200px; }
  }
  @-webkit-keyframes increase-size{
    from { height: 0px; }
    to { height: 200px; }
  }

  .animated-item.au-enter-active {
    -webkit-animation:0.2s increase-size;
    animation:0.2s increase-size;
  }

  @keyframes decrease-size {
    from { height: 200px; }
    to { height: 0px; }
  }
  @-webkit-keyframes decrease-size{
    from { height: 200px; }
    to { height: 0px; }
  }

  .animated-item.au-leave-active {
    -webkit-animation:0.2s decrease-size;
    animation:0.2s decrease-size;
  }

  @keyframes show-animation {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @-webkit-keyframes show-animation{
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes hide-animation {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @-webkit-keyframes hide-animation{
    from { opacity: 1; }
    to { opacity: 0; }
  }

  .hidden {
    opacity: 0;
  }

  .hidden-remove {
    -webkit-animation:0.2s show-animation;
    animation:0.2s show-animation;
  }

  .addMoreWidth {
    width: 40px;
  }

  #delayedElement.au-enter-active {
    -webkit-animation:0.2s show-animation;
    animation:0.2s show-animation;

    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }

  @keyframes add-more-width-animation {
    from { width: 20px; }
    to { width: 40px; }
  }
  @-webkit-keyframes add-more-width-animation{
    from { width: 20px; }
    to { width: 40px; }
  }

  @keyframes reduce-width-animation {
    from { width: 40px; }
    to { width: 20px; }
  }
  @-webkit-keyframes reduce-width-animation{
    from { width: 40px; }
    to { width: 20px; }
  }

  .addMoreWidth-add {
    -webkit-animation:0.2s add-more-width-animation;
    animation:0.2s add-more-width-animation;
  }

  .nonAnimatedWidth {
    width: 100px;
  }

  .stagger.au-enter {
    opacity: 0!important;
  }

  .stagger.au-leave {
    opacity: 1!important;
  }

  .stagger.au-enter-active {
    -webkit-animation:1.5s show-animation;
    animation:1.5s show-animation;
  }

  .stagger.au-leave-active {
    -webkit-animation:1.5s hide-animation;
    animation:1.5s hide-animation;
  }

  .stagger.au-left {
    opacity: 0!important;
  }


  .stagger-enter-only.au-enter {
    opacity: 0!important;
  }

  .stagger-enter-only.au-enter-active {
    -webkit-animation:1.0s show-animation;
    animation:1.0s show-animation;
  }

  .stagger-leave-only.au-leave {
    opacity: 1!important;
  }
  .stagger-leave-only.au-leave-active {
    -webkit-animation:1.0s hide-animation;
    animation:1.0s hide-animation;
  }

  .stagger-leave-only.au-left {
    opacity: 0!important;
  }

  ul.au-stagger, ul.au-stagger-leave, ul.au-stagger-enter {
    -webkit-animation-delay:100ms;
    animation-delay:100ms;
  }

</style>

<div id="animation">
  <ul>
    <li class="animated-item au-animate">Test 1</li>
    <li class="boring-item au-animate">Test 2</li>
  </ul>

  <div id="goingToBeShown" class="hidden">Hello</div>
  <div id="removeClassWrong" class="wrongHidden">Test</div>
  <div id="removeClassNoAnim" class="remove-non-anim"></div>
  <div id="addClassNoAnim"></div>

  <div id="goingToBeIncreased">
    I'm going to get bigger
  </div>

  <div id="delayedElement" class="au-animate">Delayed element</div>


  <ul class="au-stagger">
    <li class="stagger au-animate">Item1</li>
    <li class="stagger au-animate">Item2</li>
    <li class="stagger au-animate">Item3</li>
    <li class="stagger au-animate">Item4</li>
    <li class="stagger au-animate">Item5</li>
  </ul>

  <ul class="au-stagger-enter">
    <li class="stagger-enter-only au-animate">Item1</li>
    <li class="stagger-enter-only au-animate">Item2</li>
    <li class="stagger-enter-only au-animate">Item3</li>
  </ul>

  <ul class="au-stagger-leave">
    <li class="stagger-leave-only au-animate">Item1</li>
    <li class="stagger-leave-only au-animate">Item2</li>
    <li class="stagger-leave-only au-animate">Item3</li>
  </ul>
</div>