diff options
| author | Phil Hughes <me@iamphill.com> | 2019-03-25 09:00:37 +0000 |
|---|---|---|
| committer | Phil Hughes <me@iamphill.com> | 2019-03-25 09:00:37 +0000 |
| commit | 87d36bc20dbbc1848bd44614af923a45e286ae4c (patch) | |
| tree | 0ef98750d907bea99f799088230a6f7e4557cbd9 | |
| parent | 668c38f4f8ccbbefdb200561722273d7508ac0e0 (diff) | |
| parent | 4f0312295918539822fb0b0ec434c497b307a007 (diff) | |
| download | gitlab-ce-87d36bc20dbbc1848bd44614af923a45e286ae4c.tar.gz | |
Merge branch '57409-loading-button-transition' into 'master'
Prevent fade out transition on loading-button
Closes #57409
See merge request gitlab-org/gitlab-ce!26428
3 files changed, 12 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue index 7a53d053eec..216f6c62e69 100644 --- a/app/assets/javascripts/vue_shared/components/loading_button.vue +++ b/app/assets/javascripts/vue_shared/components/loading_button.vue @@ -53,7 +53,7 @@ export default { <template> <button :class="containerClass" :disabled="loading || disabled" type="button" @click="onClick"> - <transition name="fade"> + <transition name="fade-in"> <gl-loading-icon v-if="loading" :inline="true" @@ -63,7 +63,7 @@ export default { class="js-loading-button-icon" /> </transition> - <transition name="fade"> + <transition name="fade-in"> <slot> <span v-if="label" class="js-loading-button-label"> {{ label }} </span> </slot> diff --git a/app/assets/stylesheets/framework/vue_transitions.scss b/app/assets/stylesheets/framework/vue_transitions.scss index e07a177e153..e3bdc0b0199 100644 --- a/app/assets/stylesheets/framework/vue_transitions.scss +++ b/app/assets/stylesheets/framework/vue_transitions.scss @@ -1,9 +1,13 @@ .fade-enter-active, -.fade-leave-active { +.fade-leave-active, +.fade-in-enter-active, +.fade-out-leave-active { transition: opacity $sidebar-transition-duration $general-hover-transition-curve; } .fade-enter, +.fade-in-enter, +.fade-out-leave-to, .fade-leave-to { opacity: 0; } diff --git a/changelogs/unreleased/57409-loading-button-transition.yml b/changelogs/unreleased/57409-loading-button-transition.yml new file mode 100644 index 00000000000..3cf169d79de --- /dev/null +++ b/changelogs/unreleased/57409-loading-button-transition.yml @@ -0,0 +1,5 @@ +--- +title: Prevent fade out transition on loading-button component. +merge_request: 26428 +author: +type: fixed |