Animation with CSS and jQuery

Asked

Viewed 174 times

1

Well I am mounting an Alert system with jquery and css. Everything is working. However I noticed that in some browsers it is getting a little slow. The problem is because the div of Alert moves along with the animation.

Well my doubt and how to make icon animation happen only after Alert div animation ends.

Follows the code.

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>

jquery html css

1 answer

1


In the element <div class="f-modal-icon f-modal-success animate"> remove the class animate, thus:

    <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>

So here add the event:

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

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.