FIX Remove css fields animation on add 🔧

This commit is contained in:
Sacha Judd 2017-06-30 17:11:36 +12:00
parent 9edc5c3230
commit c1afb3a5bf
3 changed files with 17 additions and 47 deletions

View File

@ -1,14 +1,6 @@
/** /**
* Animations * Animations
*/ */
@keyframes rowSlide {
0% {
top: 20%;
}
100% {
top: 80%;
}
}
@keyframes flashBackground { @keyframes flashBackground {
0% { 0% {
background-color: white; background-color: white;
@ -42,10 +34,6 @@
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item .handle { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item .handle {
min-height: 46px; min-height: 46px;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.newField {
position: fixed;
animation: rowSlide .5s ease forwards;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.flashBackground { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.flashBackground {
animation: flashBackground 2s linear; animation: flashBackground 2s linear;
} }

View File

@ -92,19 +92,11 @@
$newField.find('.col-Title input').focus(); $newField.find('.col-Title input').focus();
} }
// animate the row positioning (add the first class) $newField.addClass('flashBackground');
if (document.createElement('div').style.animationName !== void 0) { $(".cms-content-fields").scrollTop($(".cms-content-fields")[0].scrollHeight);
$newField.addClass('newField'); if($groupEnd) {
$groupEnd.css('visibility', 'visible');
} }
// Once the animation has completed
setTimeout(function () {
$newField.removeClass('newField').addClass('flashBackground');
$(".cms-content-fields").scrollTop($(".cms-content-fields")[0].scrollHeight);
if($groupEnd) {
$groupEnd.css('visibility', 'visible');
}
}, 500);
}); });
}); });
}, },

View File

@ -2,11 +2,6 @@
* Animations * Animations
*/ */
@keyframes rowSlide {
0% {top: 20%;}
100% {top: 80%;}
}
@keyframes flashBackground { @keyframes flashBackground {
0% {background-color: white;} 0% {background-color: white;}
10% {background-color: #dcfedd;} 10% {background-color: #dcfedd;}
@ -44,11 +39,6 @@
min-height: 46px; min-height: 46px;
} }
&.newField {
position: fixed;
animation: rowSlide .5s ease forwards;
}
&.flashBackground { &.flashBackground {
animation: flashBackground 2s linear; animation: flashBackground 2s linear;
} }