Animações

    Ignite UI for Angular inclui mais de 100 animações pré-criadas especialmente projetadas para uma melhor experiência do usuário.

    Sass Animations

    Keyframes Mixin

    A Ignite UI for Angular quadros-chave mixin é usado para registrar novas animações de keyframes. O mixin pega o nome de uma animação de keyframes como parâmetro e o adiciona à lista global de registro de keyframes. Dessa forma, os keyframes não serão duplicados no CSS exportado ao incluir a mesma animação de keyframes várias vezes.

    Por exemplo, fazendo isso:

    @include fade-in();
@include fade-in();

    Will result in only one @keyframes rule added to the produced CSS:

    @keyframes fade-in { ... }

    Os seletores de quadros-chave para as etapas de animação, juntamente com os estilos CSS para os quadros-chave, são definidos dentro do corpo do mixin.

    Here's an example of creating a new animation mixin that can be used with our animation mixin.

    @mixin fade-in-bottom {
    @include keyframes(fade-in-bottom) {
        0% {
            transform: translateY(50px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

    Animation Mixin

    The animation mixin serves as a vessel for animating elements using a list of animation properties passed as parameters. Users can specify animation properties like name, duration, delay, direction, iteration count, etc. Multiple keyframe animations can be passed to the animation mixin.

    //include the 'fade-in-top' keyframes animation mixin
@include fade-in-top();

//include the animation mixin with parameters
.my-class {
    @include animation('fade-in-top' 3s $ease-out-quad infinite);
}

    Timing Functions

    Incluímos uma lista de funções de tempo pré-preparadas para usar com nossos mixins de keyframes. Leia a documentação para encontrar a lista completa de funções de tempo.

    Angular Animations

    Além de keyframes e mixagens de animações do Sass, também incluímos animações Angular predefinidas.

    Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas de Angular completo e comece a criar seus próprios aplicativos em minutos. Faça o download gratuitamente.

    Usage

    The Ignite UI for Angular animations are grouped into 8 categories depending on their visual effects - fade, flip, grow, miscellaneous, rotate, scale, slide, and swing. Every group accepts a different set of parameters, allowing you to modify the behavior of any of the included animations. Each animation is an AnimationReferenceMetadata object as produced by the animation function provided by Angular.

    If parameters are attached, they act as default values. When an animation is invoked via the useAnimation function, then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing, then the default values will be used.

    import { transition, trigger, useAnimation } from '@angular/animations';
import { fadeIn, fadeOut } from "igniteui-angular/animations/main";

animations: [
    trigger('fadeInOut', [
            transition('void => *', [
                useAnimation(fadeIn, {
                    params: {
                        duration: '.35s',
                        easing: 'ease-out'
                    }
                })
            ]),
            transition('* => void', [
                useAnimation(fadeOut, {
                    params: {
                        duration: '.2s',
                        easing: 'ease-out'
                    }
                })
            ])
        ])
]

    Timing Functions

    Ignite UI for Angular inclui um conjunto de funções de temporização que podem ser usadas para facilitar a entrada ou saída de uma animação. Existem três grupos principais de funções de temporização -EaseIn, EaseOut e EaseInOut, cada um contendo as seguintes temporizações:

    • quádruplo
    • cúbico
    • quarto
    • quinto
    • seno
    • exposição
    • circ
    • voltar

    Para usar uma função de temporização específica, importe-a primeiro:

    import { EaseOut } from "igniteui-angular/animations/easings";

    e então usá-lo como valor para o parâmetro de suavização em qualquer animação:

    useAnimation(fadeIn, {
    params: {
        easing: EaseOut.back
    }
});

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.