From c1afb3a5bfb345e0f68de0abf44fe4388a32fb9f Mon Sep 17 00:00:00 2001
From: Sacha Judd <sjudd@silverstripe.com>
Date: Fri, 30 Jun 2017 17:11:36 +1200
Subject: [PATCH] FIX Remove css fields animation on add :wrench:

---
 css/UserForm_cms.css      | 12 ------------
 javascript/FieldEditor.js | 26 +++++++++-----------------
 scss/UserForm_cms.scss    | 26 ++++++++------------------
 3 files changed, 17 insertions(+), 47 deletions(-)

diff --git a/css/UserForm_cms.css b/css/UserForm_cms.css
index f533cb8..5711a5f 100644
--- a/css/UserForm_cms.css
+++ b/css/UserForm_cms.css
@@ -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;
 }
diff --git a/javascript/FieldEditor.js b/javascript/FieldEditor.js
index 6d998d4..b456df5 100644
--- a/javascript/FieldEditor.js
+++ b/javascript/FieldEditor.js
@@ -8,8 +8,8 @@
 
 		$(".uf-field-editor tbody").entwine({
 			onmatch: function() {
-				var i, 
-					thisLevel, 
+				var i,
+					thisLevel,
 					depth = 0,
 					$buttonrow = $('.uf-field-editor .ss-gridfield-buttonrow').addClass('stickyButtons'),
 					navHeight = $('.cms-content-header.north').height() + parseInt($('.stickyButtons').css('padding-top'), 10),
@@ -17,7 +17,7 @@
 					self = this;
 
 				this._super();
-				
+
 				// Loop through all rows and set necessary styles
 				this.find('.ss-gridfield-item').each(function() {
 					switch($(this).data('class')) {
@@ -37,7 +37,7 @@
 							thisLevel = depth;
 						}
 					}
-					
+
 					$(this).toggleClass('inFieldGroup', thisLevel > 0);
 					for(i = 1; i <= 5; i++) {
 						$(this).toggleClass('inFieldGroup-level-'+i, thisLevel >= i);
@@ -76,7 +76,7 @@
 				var self = this;
 
 				this._super();
-					
+
 				// When the 'Add field' button is clicked set a one time listener.
 				// When the GridField is reloaded focus on the newly added field.
 				this.on('addnewinline', function () {
@@ -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);
 					});
 				});
 			},
diff --git a/scss/UserForm_cms.scss b/scss/UserForm_cms.scss
index 43bd20d..a15abbc 100644
--- a/scss/UserForm_cms.scss
+++ b/scss/UserForm_cms.scss
@@ -2,11 +2,6 @@
  * Animations
  */
 
-@keyframes rowSlide {
-	0% {top: 20%;}
-	100% {top: 80%;}
-}
-
 @keyframes flashBackground {
 	0% {background-color: white;}
 	10% {background-color: #dcfedd;}
@@ -30,11 +25,11 @@
 				&, &:hover {
 					background: white;
 				}
-					
+
 				td {
 					border-right-width: 0;
 					border-top: 1px solid #EEE;
-						
+
 					&:last-child {
 						border-right-width: 1px;
 					}
@@ -44,11 +39,6 @@
 					min-height: 46px;
 				}
 
-				&.newField {
-					position: fixed;
-					animation: rowSlide .5s ease forwards;
-				}
-
 				&.flashBackground {
 					animation: flashBackground 2s linear;
 				}
@@ -62,24 +52,24 @@
 				&, &:hover {
 					background: #f2f9fd;
 				}
-				
+
 				td {
 					border-bottom: 0;
 					border-top: 1px solid #eee;
 				}
-				
+
 				.col-reorder, .handle {
 					background: #BEE0F8;
 					border-top: 0;
 				}
-				
+
 				&.inFieldGroup-level-2 {
 					.col-reorder, .handle {
 						background: #99CEF4;
 						border-top: 0;
 					}
 				}
-				
+
 				&.inFieldGroup-level-3 {
 					.col-reorder, .handle {
 						background: #89BEF4;
@@ -116,7 +106,7 @@
 				td {
 					border-top: 1px solid #a8d7f5;
 				}
-				
+
 				label {
 					font-weight: bold;
 					color: #444;
@@ -135,7 +125,7 @@
 				.col-buttons .action{
 					display: none;
 				}
-				
+
 				label {
 					color: #777;
 				}