Provided Mixins

mubanTransitionMixin

This mixin extends the mubanTransitionCoreMixin.

Methods:

After extending this mixin a couple of methods are added to your component, you can see all of them in the generated documentation. See below for the most common ones!

transitionIn

• Description: Calling transition in will trigger transitionIn on your transition controller and
  • start the desired timeline.
• Parameters
  • forceTransition
    • type: boolean
    • required: false
    • description: Add this flag if you want to overwrite any active transitions
• Returns
  • Promise<void>

transitionOut

• Description: Calling transition out will trigger transitionOut on your transition controller and
  • start the desired timeline.
• Parameters
  • forceTransition
    • type: boolean
    • required: false
    • description: this flag if you want to overwrite any active transitions
  • id
    • type: string
    • required: false
    • description: This is the id of the transition out timeline that you want to play
  • reset
    • type: boolean
    • required: false
    • description: If the reset flag is set to true it will re-initialize the current timeline
• Returns
  • Promise<void>

enterView

• Description: This method is triggered when a data-scroll-component component enters the view.
• Returns
  • <void>

leaveView

• Description: This method is triggered when a data-scroll-component component leaves the view.
• Returns
  • <void>

beyondView

• Description: This method is triggered when the scrollbar is dragged down super fast the default enter view event might not be triggered therefor we have a beyondView event! If it's already transitioned in it will do nothing! But if it's not transitioned in it will still try to transitionIn
• Returns
  • <void>

startLoopingAnimation

• Description: Start the looping animations on the current component
• Parameters
  • id
    • type: string
    • required: false
    • description: This is the id of the transition out timeline that you want to play
  • reset
    • type: boolean
    • required: false
    • description: If the reset flag is set to true it will re-initialize the current timeline
• Returns
  • <void>

stopLoopingAnimation

• Description: This will stop the current looping animation, keep in mind it will not reset it just stop at the current state
• Returns
  • <void>

Properties

After extending this mixin a couple of properties are added to your component, you can see all of them in the generated documentation. See below for the most common ones!

enterViewThreshold

• Type: number
• Description: Contains a number between 0 - 1. Setting this number to for example 0.5 will trigger the enterView method when the data-scroll-component component is already visible for 50% within your viewport.

transitionController

• Description: The transition controller for the component

mubanTransitionCoreMixin

This extends the coreComponent

Properties:

After extending this mixin a couple of properties are added to your component, you can see all of them in the generated documentation. See below for the most common ones!

eventNamespace

• Type: string
• Description: contains an unique generated number.

dispatcher

• Type: EventDispatcher
• Description: Base class that adds the ability to dispatch events and attach handlers that should becalled when such events are triggered. seng-event

displayName:

• Type: string
• Description: Contains the name of the component

componentId:

• Type: string
• Description: Contains an unique id, combination of displayName and eventNamespace