animations

Content coming soon...

Visit our repository (opens new window) and raise an issue (opens new window) if you want to contribute. Thanks you for your collaboration

(Example code)

Event Binding

You can bind an event handler to control the animations using the addEventListener method. This method is implemented by all the elements.

This method has two arguments:

• type (string): Indicating the type of the event to listen: animationstart, animationiteration, or animationend.
• callback (function): The callback function, run after the event is triggered.

TIP

To have a successful result, you must declare addEventListener and, dynamically modify the class to trigger the CSS-based animation effect.

Example:

let element = $element("id")
 
element.addEventListener("animationstart", (event) => { 
    prompt.showToast({ 
        message: 'type: ' + event.type + ', animationName: ' + event.animationName + ', elapsedTime: ' + event.elapsedTime 
    }) 
}) 
element.addEventListener("animationend", (event) => { 
    prompt.showToast({ 
        message: 'type: ' + event.type + ', animationName: ' + event.animationName + ', elapsedTime: ' + event.elapsedTime 
    }) 
}) 
element.addEventListener("animationiteration", (event) => { 
    prompt.showToast({ 
        message: 'type: ' + event.type + ', animationName: ' + event.animationName + ', elapsedTime: ' + event.elapsedTime 
    }) 
})

Example

<template>
  <div class="container">
    <div class="item-container">
      <div class="animation-container row-center column-center">
        <div class="show {{animation}}"></div>
      </div>
    </div>
    <div class="mlr-container mt-item row-center">
      <input type="button" value="show" class="btn-blue" onclick="showAnimation" />
    </div>
  </div> 
</template>

<style lang="sass">
  .animation-container {
    height: 400px;
  }
  .show {
    width: 50px;
    height: 200px;
    background-color: green;
  }
  .animation {
    animation-name: Color, ang, size;
    animation-duration: 6000ms;
  }
  @keyframes Color {
    0% {
      background-color: green;
    }
    30% {
      background-color: red;
    }
  }
  @keyframes ang {
    0% {
      transform: rotate(0deg);
    }
    30% {
      transform: rotate(0deg);
    }
    60% {
      transform: rotate(-90deg);
    }
  }
  @keyframes size {
    0% {
      transform: scale(1);
    }
    65% {
      transform: scale(1);
    }
    100% {
      transform: scale(2);
    }
  }
</style>

<script>
  module.exports = {
    public: {
      animation: ""
    },
    showAnimation() {
      this.animation = "";
      this.animation = "animation";
    }
  }
</script>