fix(fade): add d-none by default for fade steppers

README.md

@@ -88,7 +88,7 @@ Add the following HTML:
 </div>
 ```
 
-If you want to add a `fade` animation, add `.fade` class on your `.content`.
+If you want to add a `fade` animation, add `.fade` and `.d-none` classes on your `.content`.
 
 ### JavaScript
 

docs/index.html

@@ -177,21 +177,21 @@ <h3>Non linear stepper (with fade)</h3>
             </div>
             <div class="bs-stepper-content">
               <form onSubmit="return false">
-                <div id="test-nlf-1" class="content fade">
+                <div id="test-nlf-1" class="content fade d-none">
                   <div class="form-group">
                     <label for="exampleInputName2">Name</label>
                     <input type="email" class="form-control" id="exampleInputName2" placeholder="Enter your name">
                   </div>
                   <button class="btn btn-primary" onclick="stepper3.next()">Next</button>
                 </div>
-                <div id="test-nlf-2" class="content fade">
+                <div id="test-nlf-2" class="content fade d-none">
                   <div class="form-group">
                     <label for="exampleInpuAddress2">Address</label>
                     <input type="email" class="form-control" id="exampleInpuAddress2" placeholder="Enter your address">
                   </div>
                   <button class="btn btn-primary" onclick="stepper3.next()">Next</button>
                 </div>
-                <div id="test-nlf-3" class="content fade text-center">
+                <div id="test-nlf-3" class="content fade d-none text-center">
                   <button type="submit" class="btn btn-primary mt-5">Submit</button>
                 </div>
               </form>

src/js/util.js

@@ -36,6 +36,11 @@ const showContent = (content, contentList) => {
     return
   }
 
+  function complete () {
+    content.classList.add(ClassName.BLOCK)
+    content.removeEventListener(transitionEndEvent, complete)
+  }
+
   const activeContent = contentList.filter(content => content.classList.contains(ClassName.ACTIVE))
   if (activeContent.length) {
     activeContent[0].classList.remove(ClassName.ACTIVE)
@@ -44,12 +49,6 @@ const showContent = (content, contentList) => {
 
   if (content.classList.contains(ClassName.FADE)) {
     content.classList.remove(ClassName.NONE)
-
-    function complete() {
-      content.classList.add(ClassName.BLOCK)
-      content.removeEventListener(transitionEndEvent, complete)
-    }
-
     const duration = getTransitionDurationFromElement(content)
     content.addEventListener(transitionEndEvent, complete)
     if (activeContent.length) {
@@ -87,7 +86,7 @@ const emulateTransitionEnd = (element, duration) => {
   let called = false
   const durationPadding = 5
   const emulatedDuration = duration + durationPadding
-  function listener() {
+  function listener () {
     called = true
     element.removeEventListener(transitionEndEvent, listener)
   }
@@ -114,5 +113,5 @@ export {
   Selectors,
   ClassName,
   customProperty,
-  detectFade,
+  detectFade
 }

tests/index.html

@@ -37,15 +37,15 @@ <h2>Linear stepper</h2>
               </div>
             </div>
             <div class="bs-stepper-content">
-              <div id="test-l-1" class="content fade">
+              <div id="test-l-1" class="content fade d-none">
                 <p class="text-center">test 1</p>
                 <button class="btn btn-primary" onclick="stepper1.next()">Next</button>
               </div>
-              <div id="test-l-2" class="content fade">
+              <div id="test-l-2" class="content fade d-none">
                 <p class="text-center">test 2</p>
                 <button class="btn btn-primary" onclick="stepper1.next()">Next</button>
               </div>
-              <div id="test-l-3" class="content fade">
+              <div id="test-l-3" class="content fade d-none">
                 <p class="text-center">test 3</p>
                 <button class="btn btn-primary" onclick="stepper1.next()">Next</button>
                 <button class="btn btn-primary" onclick="stepper1.previous()">Previous</button>