Universal Methods

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

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

animate

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

Parameters

Table 1 keyframes

Table 2 Style attributes

Table 3 Options

Table 4 Available values of the easing attribute

Return value The animation attributes are as follows.

The animation methods are as follows.

The animation events are as follows.

Example

<!-- xxx.hml -->
<div class="container">
  <div id="idName" class="box"></div>
  <div class="buttonBox">
    <button @click="start">
      start
    </button>
    <button @click="cancel">
      cancel
    </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
export default {
    data: {
        animation: '',
        options: {},
        frames: {}
    },
    onInit() {
        this.options = {
            duration: 1500,
            easing: 'friction',
            delay: 500,
            fill: 'forwards',
            iterations: 2,
            direction: 'normal',
        };
        this.frames = [
            {
                transform: {
                    translate: '-120px -0px'
                }, opacity: 0.1, offset: 0.0
            },
            {
                transform: {
                    translate: '120px 0px'
                }, opacity: 1.0, offset: 1.0
            }
        ];
    },

    start() {
        this.animation = this.$element('idName').animate(this.frames, this.options);
        this.animation.play();
    },
    cancel() {
        this.animation.cancel();
    }
}

getBoundingClientRect

getBoundingClientRect(): <Rect>

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

Return value

Table 5 Rect⁶⁺

Example

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

createIntersectionObserver

createIntersectionObserver(param?: ObserverParam): Observer

Listens for the visibility of the element on the current page.

Parameters

Table 6 ObserverParam⁶⁺

Return value

Table 7 Methods supported Observer⁶⁺

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