Animation with CSS and jQuery

Question

Animation with CSS and jQuery

Navigation

#1 by (1 votes)

1

I'm building an alert system with jquery and css. Everything is working. But I noticed that in some browsers it's getting a bit slow. The problem occurs because the alert div moves along with the animation.

Well my doubt and how to make the animation of the icon happen only after the animation of the alert div finishes.

Follow 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><!--Alertmodal--><divclass="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>

html jquery css

asked by anonymous 13.01.2017 / 19:17

1 answer

Event item ComboBox Problems generating PHP page from dynamic menu link

score 1 · Accepted Answer

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

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

Then add the event here:

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