tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-10-22 17:05:42 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #629 from creative-commoners/bugfix/remove-css-field-animation

Browse Source 
FIX Remove css fields animation on add 🔧
This commit is contained in:
Robbie Averill 2017-07-05 10:31:29 +12:00 committed by GitHub
commit 5a0ebda2c8
3 changed files with 17 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/UserForm_cms.css
View File

@ -1,14 +1,6 @@
/**
* Animations
*/
@keyframes rowSlide {
0% {
top: 20%;
}
100% {
top: 80%;
}
}
@keyframes flashBackground {
0% {
background-color: white;
@ -42,10 +34,6 @@
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item .handle {
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 {
animation: flashBackground 2s linear;
}

16
javascript/FieldEditor.js
View File

@ -92,19 +92,11 @@
$newField.find('.col-Title input').focus();
}
// animate the row positioning (add the first class)
if (document.createElement('div').style.animationName !== void 0) {
$newField.addClass('newField');
$newField.addClass('flashBackground');
$(".cms-content-fields").scrollTop($(".cms-content-fields")[0].scrollHeight);
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);
});
});
},

10
scss/UserForm_cms.scss
View File

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