Commit 87d36bc2 authored by Phil Hughes's avatar Phil Hughes

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
parents 668c38f4 4f031229
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
<template> <template>
<button :class="containerClass" :disabled="loading || disabled" type="button" @click="onClick"> <button :class="containerClass" :disabled="loading || disabled" type="button" @click="onClick">
<transition name="fade"> <transition name="fade-in">
<gl-loading-icon <gl-loading-icon
v-if="loading" v-if="loading"
:inline="true" :inline="true"
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
class="js-loading-button-icon" class="js-loading-button-icon"
/> />
</transition> </transition>
<transition name="fade"> <transition name="fade-in">
<slot> <slot>
<span v-if="label" class="js-loading-button-label"> {{ label }} </span> <span v-if="label" class="js-loading-button-label"> {{ label }} </span>
</slot> </slot>
......
.fade-enter-active, .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; transition: opacity $sidebar-transition-duration $general-hover-transition-curve;
} }
.fade-enter, .fade-enter,
.fade-in-enter,
.fade-out-leave-to,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
---
title: Prevent fade out transition on loading-button component.
merge_request: 26428
author:
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment