platform/core/common/fds.animations.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { trigger, state, style, transition, animate } from '@angular/animations';

/**
 * FdsAnimations constructor.
 *
 * @constructor
 */
function FdsAnimations() {
}

FdsAnimations.prototype = {
    constructor: FdsAnimations,

    /**
     * Fade animation
     */
    fadeAnimation: trigger(
        'routeAnimation',
        [
            state(
                '*',
                style(
                    {
                        opacity: 1
                    }
                )
            ),
            transition(
                ':enter',
                [
                    style(
                        {
                            opacity: 0
                        }
                    ),
                    animate('0.5s ease-in')
                ]
            ),
            transition(
                ':leave',
                [
                    animate(
                        '0.5s ease-out',
                        style(
                            {
                                opacity: 0
                            }
                        )
                    )
                ]
            )
        ]
    ),

    /**
     * Slide in from the left animation
     */
    slideInLeftAnimation: trigger(
        'routeAnimation',
        [
            state(
                '*',
                style(
                    {
                        opacity: 1,
                        transform: 'translateX(0)'
                    }
                )
            ),
            transition(
                ':enter',
                [
                    style(
                        {
                            opacity: 0,
                            transform: 'translateX(-100%)'
                        }
                    ),
                    animate('0.5s ease-in')
                ]
            ),
            transition(
                ':leave',
                [
                    animate(
                        '0.5s ease-out',
                        style(
                            {
                                opacity: 0,
                                transform: 'translateX(100%)'
                            }
                        )
                    )
                ]
            )
        ]
    ),

    /**
     * Slide in from the top animation
     */
    slideInDownAnimation: trigger(
        'routeAnimation',
        [
            state(
                '*',
                style(
                    {
                        opacity: 1,
                        transform: 'translateY(0)'
                    }
                )
            ),
            transition(
                ':enter',
                [
                    style(
                        {
                            opacity: 0,
                            transform: 'translateY(-100%)'
                        }
                    ),
                    animate('0.5s ease-in')
                ]
            ),
            transition(
                ':leave',
                [
                    animate(
                        '0.5s ease-out',
                        style(
                            {
                                opacity: 0,
                                transform: 'translateY(100%)'
                            }
                        )
                    )
                ]
            )
        ]
    ),

    /**
     * Fly in/out animation
     */
    flyInOutAnimation: trigger(
        'flyInOut',
        [
            state(
                'in',
                style({transform: 'translateX(0)'})
            ),
            transition(
                'void => *',
                [
                    style({transform: 'translateX(100%)'}),
                    animate('0.4s 0.1s ease-in')
                ]
            ),
            transition(
                '* => void',
                animate(
                    '0.2s ease-out',
                    style({transform: 'translateX(-100%)'})
                )
            )
        ]
    ),

    /**
     * Fly in/out animation
     */
    fadeInOutAnimation: trigger(
        'fadeInOut',
        [
            state(
                'in',
                style({opacity: 1})
            ),
            transition(
                'void => *',
                [
                    style({opacity: 0}),
                    animate('0.5s 0.1s ease-in')
                ]
            ),
            transition(
                '* => void',
                animate(
                    '0.5s ease-out',
                    style({opacity: 0})
                )
            )
        ]
    )
};

export default new FdsAnimations();