CSSMotion VS animation in Angular

Animation in CSSMotion and Angular

CSSMotion

status: none, appear, enter, leave
step: none, prepare, start, active, end

explanation for status

none: it is an idle status, like null or empty.
appear: means dom element will be created and attached to Dom. like angular void => * or :enter.

// Appear
    if(!isMounted && visible && motionAppear){
        nextStatus=STATUS_APPEAR;
    }

enter: it means we just apply a animation for an existing html element. that means the element already attached to Dom
like angular trigger a custom animation for existing element but not powerful like angular

// Enter
    if(isMounted && visible && motionEnter){
        nextStatus=STATUS_ENTER;
    }

leave: it means react will remove/destory the dom element.
like angular * => void or : leave

// Leave
    if(
        (isMounted && !visible && motionLeave) ||
        (!isMounted && motionLeaveImmediately && !visible && motionLeave)
    ){
        nextStatus=STATUS_LEAVE;
    }

note: ${animationName}-appear or ${animationName}-enter ${animationName}-leave className will be applied to target element.please define css styles to these class.

explanation for step

for every status, it will go across steps queue, like prepare -> start -> active -> end.
eveytime we come into one step, we will call callback function to get an result promise/nonpromise to deterine if we go to next step directly or go to next step in next animationframe or in any time.

note: these className will be generated according to different step. ${transitionName}-${statusName}-preare/start/active. please define different css.after end of animation, if visible, remove all the classNames, otherwise, apply leavedClassName (xxx-hidden), or remove from DOM

prepare: it is the start of a lifecycle, we will call onAppearPrepare, onEnterPrepare, onLeavePrepare we can use these functions to control animation process. take role like delay.

if(nextStep === STEP_PREPARE){
    const onPrepare = eventHandlers[STEP_PREPARE];
    if(!onPrepare){
        return SkipStep;
    }
    return onPrepare(getDomElement());
}

start: it will call onAppearStart, onEnterStart, onLeaveStart, these functions will return style which will be apply to target elements directly.

if(step in eventHandlers){
    setStyle(eventHandlers[step as 'start'|'active']?.(getDomElement(),null as any)||null);
}

active: same as start, it will call onAppearActive, onEnterActive, onLeaveActive to apply style to target elements. by the way, we will listen to the animationend event to the target element. or we will call animationend event handler in motionDeadline

if(step === STEP_ACTIVE){
    patchMotionEvents(getDomElement());

    if(motionDeadline! > 0){
        clearTimeout(deadlineRef.current!);
        deadlineRef.current = setTimeout(()=>{
            onInternalMotionEnd({
                        deadline:true
            }as MotionEvent);
        },motionDeadline);
    }
}

end: the end the animation, Dom will trigger animationend/transitionend event which will be listened active end. we will call onAppearEnd, onEnterEnd, onLeaveEnd to determine if we reset status and step into 'none'

function onInternalMotionEnd(event:MotionEvent){
        const element = getDomElement();
        if(event && !event.deadline && event.target !==element){
            return;
        }

        let canEnd:boolean|void;
        if(status === STATUS_APPEAR && activeRef.current){
            canEnd = onAppearEnd?.(element,event);
        }else if(status === STATUS_ENTER && activeRef.current){
            canEnd = onEnterEnd?.(element,event);
        }else if(status === STATUS_LEAVE && activeRef.current){
            canEnd = onLeaveEnd?.(element,event);
        }

        if(canEnd !== false && !destroyRef.current){
            setStatus(STATUS_NONE);
            setStyle(null);
        }
}

onVisibleChanged, when will trigger this event?

two conditions: 1. onAppearEnd,onEnterEnd,onLeaveEnd don't return false, as it will set status to none. 2. visible has value.
to summary,

For Appear/Enter/Leave animation, when animation end, and event not return a false, it will trigger onVisibleChange. we can treat this as the end of the animation.

we give a simple css style for example, one is for transition, another is for animation.

  .transition{
    transition: background 0.3s,height 1.3s,opacity 1.3s;

    &.transition-appear,
    &.transition-enter{
        opacity: 0;
    }
    &.transition-appear.transition-appear-active,
    &.transition-enter.transition-enter-active{
        opacity: 1;
    }

    &.transition-leave-active{
        opacity: 0;
        background: green;
    }
  }


.animation{
    animation-duration: 1.3s;
    animation-fill-mode: both;

    &.animation-appear,
    &.animation-enter{
        animation-name: enter;
        animation-play-state: paused;
    }

    &.animation-appear.animation-appear-active,
    &.animation-enter.animation-enter-active{
        animation-name: enter;
        animation-play-state: running;
    }
    &.animation-leave{
        animation-name:leave;
        animation-fill-mode: both;
        animation-play-state: paused;
    }
    &.animation-leave.animation-leave-active{
        animation-play-state: running;
    }
}

A key point for using CSSMotion, we get className, style from CSSMotion and apply to our target element, so in most case the use case may look like this

<CSSMotion>
{
    ({className,style},ref)=>(
        <div ref={ref} className={className} style = {style}>
        </div>
    )
}
</CSSMotion>

Now Let's talk about animation in angular

we have these concepts state transition animation

state: it can be any string, for each state it will have a name and fixed style.

state('state1', style({ height: '*', opacity: 1, overflow: 'hidden' })),
state('state2', style({ height: 0, opacity: 0, padding: 0, overflow: 'hidden' })),

transition: it define the transition between different state and also specify the animation used in this transition

 transition(`state1 => state2`, [
      animate('0.2s ease-out')
    ]),

Angular also provide functions to make animation reusable, just see the code and we include the animation into our component

export function EnterAnimation(){
  return [
    transition(':enter',useAnimation(
      animation([
        style({transform:'scale(0.8)',opacity:0}),
        animate('300ms ease-out',style({transform:'none',opacity:1}))
      ])
    ))
  ]
}

@Component({
    selector:'subscription-transcribe',
    templateUrl:'./subscription-transcribe.component.html',
    styleUrls:['./subscription-transcribe.component.scss'],
    animations:[
        trigger('enterLeaveTrigger',
            EnterAnimation()
        )
    ]
})

In Component level, animation is refered as trigger, it has a name and in template level we just apply it to the target html element.

<div  [@enterLeaveTrigger]> (@enterLeaveTrigger.start)="(e)=>{}" (@enterLeaveTrigger.end)="(e)=>{}"</div>