Universal Methods

After a component is assigned the id attribute, you can use the ID to obtain the component objects and call functions.

animate

animate( keyframes: Keyframes, options: Options): void

• Name

Table 1 keyframes

Table 2 Style attributes

Table 3 Options description

Table 4 Available values of the easing attribute

• Return values

  The animation attributes are as follows.

Methods for animation

Events for animation

• Example

  <!-- xxx.hml -->
  <div class="container">
    <div id="idName" class="box"></div>
    <div class="buttonBox">
      <button @click="start">
        start
      </button>
      <button @click="cancel">
        cancels
      </button>
    </div>
  </div>
  

  /* xxx.css */
  .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .box{
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    margin-top: 30px;
  }
  .buttonBox{
    margin-top: 30px;
    width: 250px;
    justify-content: space-between;
  }
  button{
    background-color: #8e8b89;
    color: white;
    width: 100px;
    height: 40px;
    font-size: 24px;
  }
  

  // xxx.js
  import prompt from '@system.prompt';
  export default{
    data:{
      animation:'',
    },
    onInit(){
    },
    onShow(){
      var options = {
        duration: 1500,
        easing: 'friction',
        delay: 500,
        fill: 'forwards',
        iterations: 2,
        direction: 'normal',
      };
      var frames = [
        {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
        {transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0}
      ];
      this.animation = this.$element('idName').animate(frames, options);
      // handle finish event
      this.animation.onfinish = function(){
        prompt.showToast({
          message: "The animation is finished."
        });
      };
      // handle cancel event
      this.animation.oncancel = function(){
        prompt.showToast({
          message: "The animation is canceled."
        });
      };
      // handle repeat event
      this.animation.onrepeat = function(){
         prompt.showToast({
            message: "The animation is repeated."
         });
      };
    },
    start(){
      this.animation.play();
    },
    cancel(){
      this.animation.cancel();
    }
  }
  

  

getBoundingClientRect

getBoundingClientRect(): <Rect>

Obtains the size of the element and its position relative to the window.

• Return values

  Table 5 Rect attributes⁶⁺

• Example

  // xxx.js
  var rect = this.$element('id').getBoundingClientRect();
  console.info(`current element position is ${rect.left}, ${rect.top}`);
  

createIntersectionObserver

createIntersectionObserver(param?: ObserverParam):Observer

Gets notified of the visibility of an element on the current page.

• Name

Table 6 ObserverParam attributes⁶⁺

• Return values

  Table 7 Methods supported by the Observer object⁶⁺

• Example

  // xxx.js
  let observer = this.$element('broad').createIntersectionObserver({
    ratios: [0.2, 0.5], // number
  });
  
  observer.observe((isVisible, ratio)=> {
      console.info('this element is ' + isVisible + 'ratio is ' + ratio)
  })
  
  observer.unobserve()