use transition instead of animation to highlight changes24032-when-changing-project-visibility-setting-change-other-dropdowns-automatically

4 files changed, 13 insertions, 17 deletions

diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index aefa34936ad..c0f757269cb 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -1,8 +1,8 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, one-var, no-underscore-dangle, prefer-template, no-else-return, prefer-arrow-callback, max-len */
 
 function highlightChanges($elm) {
-  $elm.removeClass('highlight-changes');
-  setTimeout(() => $elm.addClass('highlight-changes'), 10);
+  $elm.addClass('highlight-changes');
+  setTimeout(() => $elm.removeClass('highlight-changes'), 10);
 }
 
 (function() {
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 55f57395715..3cd7f81da47 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -187,17 +187,3 @@ a {
 .fade-in-full {
   animation: fadeInFull $fade-in-duration 1;
 }
-
-@keyframes highlightChanges {
-  0% {
-    background: $highlight-changes-color;
-  }
-
-  100% {
-    background: transparent;
-  }
-}
-
-.highlight-changes {
-  animation: highlightChanges 2s ease-out;
-}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d003726073f..c8183b944d1 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -187,6 +187,7 @@ $divergence-graph-bar-bg: #ccc;
 $divergence-graph-separator-bg: #ccc;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
+$highlight-changes-color: rgb(235, 255, 232);
 
 
 /*
@@ -464,7 +465,6 @@ $label-border-radius: 100px;
 * Animation
 */
 $fade-in-duration: 200ms;
-$highlight-changes-color: rgb(235, 255, 232);
 
 /*
 * Lint
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 4b324aaea6e..881fa6b56ac 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -35,6 +35,16 @@
     }
   }
 
+  select {
+    background: transparent;
+    transition: background 2s ease-out;
+
+    &.highlight-changes {
+      background: $highlight-changes-color;
+      transition: none;
+    }
+  }
+
   .help-block {
     margin-bottom: 10px;
   }