1

Bom estou montando um sistema de alert com jquery e css. Tudo esta funcionando. Porém notei que em alguns navegadores esta ficando um pouco lento. O problema ocorre pois a div do alert se movimento junto com a animação.

Bom a minha dúvida e como fazer a animação do icone acontecer so depois que a animação da div do alert terminar.

Segue o código.

function CustomAlert() {

    /**
     * Exibe a div modal
     * 
     * @this.show
     * 
     * @param dialog - Texto que será exibido
     * @param link - FALSE = Não efetua nenhuma operação, TRUE = Volta a página anterior, Ou adiciona o link para redirecionamento
     * @param title - Titulo que será exibido
     * @param confirm - FALSE = Não exibe botão calcelar, TRUE = Exibe botnao cancelar
     */
    this.show = function (dialog, title, link, confirm) {

        // Remove o focus dos input
        $("input").blur();

        // Inicia variáveis
        var bt;
        var bt_cancel;

        // Verifica se exibe botão cancelar
        if (confirm === true) {
            bt_cancel = '<button class="button_cancel" onclick="Alert.ok()">VOLTAR</button>&nbsp;';
        } else {
            bt_cancel = '';
        }

        // Verifica o link de retorno
        if ((link !== true) && (link !== false)) {
            bt = '' + bt_cancel + '<button class="button_ok" onclick="window.location=\'' + link + '\'">OK</button>';
        }
        if ((link === false) || (link === "0")) {
            bt = '<button class="button_ok" onclick="Alert.ok()">OK</button>';
        }
        if ((link === true) || (link === "1")) {
            bt = '<button class="button_ok" onclick="history.back()">OK</button>';
        }

        // Verifica clique no teclado     
        $(document).on('keypress', function (event) {
            if (event.keyCode === 13) {
                $('.button_ok').click();
            }
            if (event.keyCode === 27) {
                $('.button_cancel').click();
            }
        });

        // CSS posicionamento da div
        $('.dialogbox').show();
        $('.dialogbox').animate({marginTop:"50px"},'fast');
    
        // Escurece a tela
        $("body").append('<div class="shadow-full"></div>');

        // Monta a div
        $(".dialogboxhead").html(title);
        $(".dialogboxbody").html(dialog);
        $(".dialogboxfoot").html(bt);
    };

    // Fecha a div
    this.ok = function () {
        
        // Pega ponto final da DIV
        var final = $('.dialogbox').position().top + $('.dialogbox').offset().top + $('.dialogbox').outerHeight();
        
        // Animação
        $('.shadow-full').fadeOut('fast');
        $('.dialogbox').animate({marginTop:"-"+final+"px"},'fast', function (){
            $('.dialogbox').hide();
        });
    };
}
var Alert = new CustomAlert();
body {
  background: #ccc;
  }
.dialogbox { 
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    max-width: 550px;
    border-radius: 4px;
    background: #FFFFFF;
    overflow: hidden;
    display: none;
    z-index: 9999;
}
.dialogbox > div {
    margin: 8px; 
}
.dialogbox > div > .dialogboxhead { 
    font-size: 30px; 
    padding: 10px; 
    text-align: center; 
}
.dialogbox > div > .dialogboxbody {
    padding: 20px;
}
.dialogbox > div > .dialogboxfoot {
    text-align: center; 
}
.dialogboxfoot .button_ok, .dialogboxfoot .button_cancel {
    margin-bottom: 5px;
    border: 0;
    padding: 5px;
    width: 100px;
    height: 42px; 
    cursor: pointer;
    border-radius: 4px;
    color: #FFFFFF; 
}
.f-modal-alert .f-modal-icon {
    border-radius: 50%;
    border: 4px solid gray;
    box-sizing: content-box;
    height: 80px;
    margin: 20px auto;
    padding: 0;
    position: relative;
    width: 80px;
}
.f-modal-alert .f-modal-icon.f-modal-success, .f-modal-alert .f-modal-icon.f-modal-error {
    border-color: #1976D2;
}
.f-modal-alert .f-modal-icon.f-modal-success:after, .f-modal-alert .f-modal-icon.f-modal-success:before, .f-modal-alert .f-modal-icon.f-modal-error:after, .f-modal-alert .f-modal-icon.f-modal-error:before {
    background: #fff;
    content: '';
    height: 120px;
    position: absolute;
    transform: rotate(45deg);
    width: 60px;
}
.f-modal-alert .f-modal-icon.f-modal-success:before, .f-modal-alert .f-modal-icon.f-modal-error:before {
    border-radius: 120px 0 0 120px;
    left: -33px;
    top: -7px;
    transform-origin: 60px 60px;
    transform: rotate(-45deg);
}
.f-modal-alert .f-modal-icon.f-modal-success:after, .f-modal-alert .f-modal-icon.f-modal-error:after {
    border-radius: 0 120px 120px 0;
    left: 30px;
    top: -11px;
    transform-origin: 0 60px;
    transform: rotate(-45deg);
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-placeholder, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-placeholder {
    border-radius: 50%;
    border: 4px solid rgba(66, 165, 245, 0.2);
    box-sizing: content-box;
    height: 80px;
    left: -4px;
    position: absolute;
    top: -4px;
    width: 80px;
    z-index: 2;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-fix, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-fix {
    background-color: #fff;
    height: 90px;
    left: 28px;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 5px;
    z-index: 1;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line {
    background-color: #0091ff;
    border-radius: 2px;
    display: block;
    height: 5px;
    position: absolute;
    z-index: 2;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-tip, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-tip {
    left: 14px;
    top: 46px;
    transform: rotate(45deg);
    width: 25px;
}
.f-modal-alert .f-modal-icon.f-modal-success .f-modal-line.f-modal-long, .f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-long {
    right: 8px;
    top: 38px;
    transform: rotate(-45deg);
    width: 47px;
}
.f-modal-alert .f-modal-icon.f-modal-error {
    border-color: #D84315;
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-x-mark {
    display: block;
    position: relative;
    z-index: 2;
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-placeholder {
    border: 4px solid rgba(254, 102, 43, .2) ;
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line {
    background-color: #F65314;
    top: 37px;
    width: 47px;
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-left {
    left: 17px;
    transform: rotate(45deg);
}
.f-modal-alert .f-modal-icon.f-modal-error .f-modal-line.f-modal-right {
    right: 16px;
    transform: rotate(-45deg);
}
.f-modal-alert .f-modal-icon.f-modal-warning {
    border-color: #FFC72D;
}
.f-modal-alert .f-modal-icon.f-modal-warning:before {
    animation: pulseWarning 2s linear infinite;
    background-color: #fff;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
}
.f-modal-alert .f-modal-icon.f-modal-warning:after {
    background-color: #fff;
    border-radius: 50%;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.f-modal-alert .f-modal-icon.f-modal-warning .f-modal-body {
    background-color: #FFAB00;
    border-radius: 2px;
    height: 47px;
    left: 50%;
    margin-left: -2px;
    position: absolute;
    top: 10px;
    width: 5px;
    z-index: 2;
}
.f-modal-alert .f-modal-icon.f-modal-warning .f-modal-dot {
    background-color: #FBBC05;
    border-radius: 50%;
    bottom: 10px;
    height: 7px;
    left: 50%;
    margin-left: -3px;
    position: absolute;
    width: 7px;
    z-index: 2;
}
.f-modal-alert .f-modal-icon + .f-modal-icon {
    margin-top: 50px;
}
.animateSuccessTip {
    animation: animateSuccessTip .75s;
}
.animateSuccessLong {
    animation: animateSuccessLong .75s;
}
.f-modal-icon.f-modal-success.animate:after {
    animation: rotatePlaceholder 4.25s ease-in;
}
.f-modal-icon.f-modal-error.animate:after {
    animation: rotatePlaceholder 4.25s ease-in;
}
.animateErrorIcon {
    animation: animateErrorIcon .5s;
}
.animateXLeft {
    animation: animateXLeft .75s;
}
.animateXRight {
    animation: animateXRight .75s;
}
.scaleWarning {
    animation: scaleWarning 0.75s infinite alternate;
}
.pulseWarningIns {
    animation: pulseWarningIns 0.75s infinite alternate;
}
@keyframes animateSuccessTip {
    0%,54% {
        width: 0;
        left: 1px;
        top: 19px;
    }
    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }
    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }
    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}
@keyframes animateSuccessLong {
    0%,65% {
        width: 0;
        right: 46px;
        top: 54px;
    }
    84% {
        width: 55px;
        right: 0;
        top: 35px;
    }
    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}
@keyframes rotatePlaceholder {
    0%,5% {
        transform: rotate(-45deg);
    }
    100%,12% {
        transform: rotate(-405deg);
    }
}
@keyframes animateErrorIcon {
    0% {
        transform: rotateX(100deg);
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}
@keyframes animateXLeft {
    0%,
    65% {
        left: 82px;
        top: 95px;
        width: 0;
    }
    84% {
        left: 14px;
        top: 33px;
        width: 47px;
    }
    100% {
        left: 17px;
        top: 37px;
        width: 47px;
    }
}
@keyframes animateXRight {
    0%,
    65% {
        right: 82px;
        top: 95px;
        width: 0;
    }
    84% {
        right: 14px;
        top: 33px;
        width: 47px;
    }
    100% {
        right: 16px;
        top: 37px;
        width: 47px;
    }
}
@keyframes scaleWarning {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes pulseWarning {
    0% {
        background-color: #fff;
        transform: scale(1);
        opacity: 0.5;
    }
    30% {
        background-color: #fff;
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        background-color: #FBBC05;
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes pulseWarningIns {
    0% {
        background-color: #FBBC05;
    }
    100% {
        background-color: #FFC72D;
    }
}
.animate-spin {
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: inline-block;
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@-webkit-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@-o-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@-ms-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Alert modal -->
        <div class="dialogbox">
            <div>
                <div>
                    <div class="f-modal-alert">
                        <div class="f-modal-icon f-modal-success animate">
                            <span class="f-modal-line f-modal-tip animateSuccessTip"></span>
                            <span class="f-modal-line f-modal-long animateSuccessLong"></span>
                            <div class="f-modal-placeholder"></div>
                            <div class="f-modal-fix"></div>
                        </div>
                    </div>
                </div>
                <div class="dialogboxhead"></div>
                <div class="dialogboxbody"></div>
                <div class="dialogboxfoot"></div>
            </div>
        </div>

<a onclick="Alert.show('TEXTO AQUI','TÍTULO','http://google.com',true)">Clique aqui</a>

1 Resposta 1

1

No elemento <div class="f-modal-icon f-modal-success animate"> remova a classe animate, assim:

    <div class="dialogbox">
        <div>
            <div>
                <div class="f-modal-alert">
                    <div class="f-modal-icon f-modal-success">
                        <span class="f-modal-line f-modal-tip animateSuccessTip"></span>
                        <span class="f-modal-line f-modal-long animateSuccessLong"></span>
                        <div class="f-modal-placeholder"></div>
                        <div class="f-modal-fix"></div>
                    </div>
                </div>
            </div>
            <div class="dialogboxhead"></div>
            <div class="dialogboxbody"></div>
            <div class="dialogboxfoot"></div>
        </div>
    </div>

Então aqui adicione o evento:

// CSS posicionamento da div
$('.dialogbox').show();
$('.dialogbox').animate({marginTop:"50px"},'fast', function() {
    //Isso irá adicionar a classe
    $(".f-modal-success", this).addClass("animate");
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .