From 28971daafde3b5685d7b7f83392d213c75a6de45 Mon Sep 17 00:00:00 2001
From: Emanuel Mutschlechner <emanuelmutschlechner@users.noreply.github.com>
Date: Sun, 29 Apr 2018 00:49:19 +0200
Subject: [PATCH 1/2] feat(alert): Add fade prop

---
 src/components/alert/alert.css |  6 ++++++
 src/components/alert/alert.js  | 17 ++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/components/alert/alert.css

diff --git a/src/components/alert/alert.css b/src/components/alert/alert.css
new file mode 100644
index 00000000000..1f5f2c26d8f
--- /dev/null
+++ b/src/components/alert/alert.css
@@ -0,0 +1,6 @@
+.fade-enter-active, .fade-leave-active {
+    transition: opacity .15s linear;
+}
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+}
diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index 68aead69f72..ccd28e1f5e1 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -1,5 +1,7 @@
 import bButtonClose from '../button/button-close'
 
+import './alert.css'
+
 export default {
   components: {bButtonClose},
   render (h) {
@@ -16,10 +18,15 @@ export default {
         [ this.$slots.dismiss ]
       )
     }
-    return h(
+    let alert = h(
       'div',
-      { class: this.classObject, attrs: { role: 'alert', 'aria-live': 'polite', 'aria-atomic': true } },
-      [ dismissBtn, this.$slots.default ]
+      {class: this.classObject, attrs: {role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
+      [dismissBtn, this.$slots.default]
+    )
+    return !this.fade ? alert : h(
+      'transition',
+      { props: { name: 'fade', appear: true } },
+      [ alert ]
     )
   },
   model: {
@@ -60,6 +67,10 @@ export default {
     show: {
       type: [Boolean, Number],
       default: false
+    },
+    fade: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {

From ffe33a3b4ea31d8bd5829c9442d4cf087d32cac3 Mon Sep 17 00:00:00 2001
From: Emanuel Mutschlechner <emanuelmutschlechner@users.noreply.github.com>
Date: Sun, 29 Apr 2018 13:09:44 +0200
Subject: [PATCH 2/2] docs(alert): Add example for fading alerts and fix some
 errors

---
 src/components/alert/README.md | 63 ++++++++++++++++++++++++++++++++--
 src/components/alert/alert.js  |  2 +-
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/components/alert/README.md b/src/components/alert/README.md
index 3a5674b98b0..79f30e58616 100755
--- a/src/components/alert/README.md
+++ b/src/components/alert/README.md
@@ -168,7 +168,7 @@ with the dismiss button.
 <!-- alert-dismis-1.vue -->
 ```
 
-### Auto dismissing alerts:
+### Auto dismissing alerts
 To create a `<b-alert>` that dismisses automatically after a period of time, set
 the `show` prop to the number of seconds you would like the `<b-alert>` to remain visible for.
 
@@ -178,7 +178,7 @@ the `show` prop to the number of seconds you would like the `<b-alert>` to remai
     <b-alert :show="dismissCountDown"
              dismissible
              variant="warning"
-             @dismissed="dismissCountdown=0"
+             @dismissed="dismissCountDown=0"
              @dismiss-count-down="countDownChanged">
       This alert will dismiss after {{dismissCountDown}} seconds...
     </b-alert>
@@ -210,4 +210,63 @@ export default {
 <!-- alert-auto-dismiss-1.vue -->
 ```
 
+## Fading alerts
+Use the `fade` prop to enable animation. By default alerts are not animated.
+
+```html
+<template>
+  <div>
+    <b-alert show dismissible fade>
+      Dismissible Alert!
+    </b-alert>
+  
+    <b-alert variant="danger"
+             dismissible
+             fade
+             :show="showDismissibleAlert"
+             @dismissed="showDismissibleAlert=false">
+      Dismissible Alert!
+    </b-alert>
+  
+    <b-alert :show="dismissCountDown"
+             dismissible
+             fade
+             variant="warning"
+             @dismissed="dismissCountDown=0"
+             @dismiss-count-down="countDownChanged">
+      This alert will dismiss after {{dismissCountDown}} seconds...
+    </b-alert>
+      
+    <b-btn @click="showAlert" variant="info" class="m-1">
+      Show alert with count-down timer
+    </b-btn>
+    <b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
+      Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
+    </b-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      dismissSecs: 5,
+      dismissCountDown: 0,
+      showDismissibleAlert: false
+    }
+  },
+  methods: {
+    countDownChanged (dismissCountDown) {
+      this.dismissCountDown = dismissCountDown
+    },
+    showAlert () {
+      this.dismissCountDown = this.dismissSecs
+    }
+  }
+}
+</script>
+
+<!-- alert-fade-1.vue -->
+```
+
 ## Component Reference
diff --git a/src/components/alert/alert.js b/src/components/alert/alert.js
index ccd28e1f5e1..75d713a4954 100644
--- a/src/components/alert/alert.js
+++ b/src/components/alert/alert.js
@@ -18,7 +18,7 @@ export default {
         [ this.$slots.dismiss ]
       )
     }
-    let alert = h(
+    const alert = h(
       'div',
       {class: this.classObject, attrs: {role: 'alert', 'aria-live': 'polite', 'aria-atomic': true}},
       [dismissBtn, this.$slots.default]