CSS Panel - Prevent Animation on New Style

2 files changed, 12 insertions, 1 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
             });