CSS Panel - Prevent Animation on New Style

3 files changed, 13 insertions, 2 deletions

diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.css b/js/panels/css-panel/style-declaration.reel/style-declaration.css
index 6be8d33c..d4755b04 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.css
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.css
@@ -10,4 +10,7 @@
 }
 .drag-over {
     /*background-color: red;*/
+}
+.css-animation-prevent * {
+    -webkit-transition-duration: 0 !important;
 }
\ No newline at end of file
diff --git a/js/panels/css-panel/style-declaration.reel/style-declaration.js b/js/panels/css-panel/style-declaration.reel/style-declaration.js
index 57cbdb63..6187989b 100644
--- a/js/panels/css-panel/style-declaration.reel/style-declaration.js
+++ b/js/panels/css-panel/style-declaration.reel/style-declaration.js
@@ -216,7 +216,15 @@ exports.StyleDeclaration = Montage.create(Component, {
     },
 
     addNewStyle : {
-        value: function() {
+        value: function(preventAnimation) {
+            if(preventAnimation) {
+                this.element.classList.add('css-animation-prevent');
+
+                setTimeout(function() {
+                    this.element.classList.remove('css-animation-prevent');
+                }.bind(this), 1000);
+            }
+
             this.addStyle('property', 'value', {
                 isEmpty : true
             });
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index 5229b92e..d607a0ba 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -145,7 +145,7 @@ exports.StylesViewDelegate = Montage.create(Component, {
                         if(nextFocus) {
                             nextFocus.propertyField.start();
                         } else if(style.dirty) {
-                            style.parentComponent.parentComponent.addNewStyle();
+                            style.parentComponent.parentComponent.addNewStyle(true);
                             style.editingNewStyle = false;
                             setTimeout(function() {
                                 style.getSiblingStyle('next').propertyField.start();