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> ';
} 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>