diff --git a/src/components/character-count/__snapshots__/character-count.spec.ts.snap b/src/components/character-count/__snapshots__/character-count.spec.ts.snap
index 4f3b87e60..6e0467f74 100644
--- a/src/components/character-count/__snapshots__/character-count.spec.ts.snap
+++ b/src/components/character-count/__snapshots__/character-count.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`MCharacterCount should render correctly 1`] = `<div class="m-character-
 
 exports[`MCharacterCount should render correctly when maxLength prop is set 1`] = `
 <div class="m-character-count">
-  <div aria-hidden="true" name="m--is" class="m-character-count__wrap"><span>20</span>/40</div>
+  <div aria-hidden="true" name="m--is" css="true" class="m-character-count__wrap"><span>20</span>/40</div>
 </div>
 `;
 
diff --git a/src/components/character-count/character-count.html b/src/components/character-count/character-count.html
index 8883d021c..e3a518025 100644
--- a/src/components/character-count/character-count.html
+++ b/src/components/character-count/character-count.html
@@ -1,5 +1,5 @@
 <div class="m-character-count">
-    <m-accordion-transition :transition="transition">
+    <m-accordion-transition :disabled="!transition">
         <div v-if="hasCounter"
              class="m-character-count__wrap"
              aria-hidden="true"><span>{{ valueLength }}</span>/{{ maxLength }}</div>
diff --git a/src/components/menu/menu-item/menu-item.html b/src/components/menu/menu-item/menu-item.html
index bc54f0955..e3cdfeb70 100644
--- a/src/components/menu/menu-item/menu-item.html
+++ b/src/components/menu/menu-item/menu-item.html
@@ -42,7 +42,7 @@
                 ref="plus"
                 v-if="group"></m-plus>
     </span>
-    <m-accordion-transition :transition="isAnimReady"
+    <m-accordion-transition :disabled="!isAnimReady"
                             ref="transition">
         <ul :id="ariaControls"
             class="m-menu-item__group"
diff --git a/src/components/transitions/accordion-transition/__snapshots__/accordion-transition.stories.ts.snap b/src/components/transitions/accordion-transition/__snapshots__/accordion-transition.stories.ts.snap
new file mode 100644
index 000000000..ff09c99f6
--- /dev/null
+++ b/src/components/transitions/accordion-transition/__snapshots__/accordion-transition.stories.ts.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components|m-accordion-transition Accordion example 1`] = `
+<div>
+  <div>
+    <button
+      class="m-button m--is-skin-primary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        
+                    Close accordion
+                 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+     
+    <button
+      class="m-button m-u--margin-left m--is-skin-secondary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        
+                    Disabled transition
+                 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+  </div>
+   
+  <div>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+    </p>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+    </p>
+  </div>
+</div>
+`;
diff --git a/src/components/transitions/accordion-transition/accordion-transition.html b/src/components/transitions/accordion-transition/accordion-transition.html
index b8666f6d5..83285380a 100644
--- a/src/components/transitions/accordion-transition/accordion-transition.html
+++ b/src/components/transitions/accordion-transition/accordion-transition.html
@@ -1,4 +1,5 @@
 <transition name="m--is"
+            :css="!disabled"
             @before-enter="beforeEnter"
             @enter="enter"
             @after-enter="afterEnter"
diff --git a/src/components/transitions/accordion-transition/accordion-transition.stories.ts b/src/components/transitions/accordion-transition/accordion-transition.stories.ts
new file mode 100644
index 000000000..4534ab673
--- /dev/null
+++ b/src/components/transitions/accordion-transition/accordion-transition.stories.ts
@@ -0,0 +1,46 @@
+import { storiesOf } from '@storybook/vue';
+import Vue from 'vue';
+import { componentsHierarchyRootSeparator } from '../../../../conf/storybook/utils';
+import { MButtonSkin } from '../../button/button';
+import { ACCORDION_TRANSITION_NAME } from '../../component-names';
+import AccordionTransitionPlugin from './accordion-transition';
+
+Vue.use(AccordionTransitionPlugin);
+
+storiesOf(`${componentsHierarchyRootSeparator}${ACCORDION_TRANSITION_NAME}`, module)
+    .add('Accordion example', () => ({
+        data: () => ({
+            open: true,
+            disabledTransition: false,
+            buttonSkin: MButtonSkin.Secondary
+        }),
+        methods: {
+            toggleOpen(): void {
+                let _this: any = this as any;
+                _this.open = !_this.open;
+            },
+            toggleDisabledTransition(): void {
+                let _this: any = this as any;
+                _this.disabledTransition = !_this.disabledTransition;
+            }
+        },
+        template: `
+        <div>
+            <div>
+                <m-button @click="toggleOpen()">
+                    {{open ? 'Close' : 'Open'}} accordion
+                </m-button>
+                <m-button class="m-u--margin-left"
+                          :skin="buttonSkin"
+                          @click="toggleDisabledTransition()">
+                    {{disabledTransition ? 'Enabled' : 'Disabled'}} transition
+                </m-button>
+            </div>
+            <m-accordion-transition :disabled="disabledTransition">
+                <div v-if="open">
+                    <p v-for="index in 4"
+                       :key="index">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
+                </div>
+            </m-accordion-transition>
+        </div>`
+    }));
diff --git a/src/components/transitions/accordion-transition/accordion-transition.ts b/src/components/transitions/accordion-transition/accordion-transition.ts
index 4bca4662e..408bab5bf 100644
--- a/src/components/transitions/accordion-transition/accordion-transition.ts
+++ b/src/components/transitions/accordion-transition/accordion-transition.ts
@@ -15,14 +15,14 @@ export class MAccordionTransition extends ModulVue {
     public heightDelta: number;
 
     @Prop({ default: true })
-    public transition: boolean;
+    public disabled: boolean;
 
     public setClassHasTransition(el: HTMLElement): void {
         if (!el.classList.contains(ACCORDION_TRANSITION_NAME)) {
             el.classList.add(ACCORDION_TRANSITION_NAME);
         }
 
-        if (this.transition) {
+        if (!this.disabled) {
             el.classList.add(CLASS_HAS_TRANSITION);
         } else if (el.classList.contains(CLASS_HAS_TRANSITION)) {
             el.classList.remove(CLASS_HAS_TRANSITION);
diff --git a/src/components/transitions/slide-transition/__snapshots__/slide-transition.stories.ts.snap b/src/components/transitions/slide-transition/__snapshots__/slide-transition.stories.ts.snap
new file mode 100644
index 000000000..b1e88f67d
--- /dev/null
+++ b/src/components/transitions/slide-transition/__snapshots__/slide-transition.stories.ts.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots components|m-slide-transition Tabs example 1`] = `
+<div>
+  <m-navbar
+    selected="1"
+    skin="tab-light"
+  >
+    <m-navbar-item
+      value="1"
+    >
+      
+                    Tab 1
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="2"
+    >
+      
+                    Tab 2
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="3"
+    >
+      
+                    Tab 3
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="4"
+    >
+      
+                    Tab 4
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="5"
+    >
+      
+                    Tab 5
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="6"
+    >
+      
+                    Tab 6
+                
+    </m-navbar-item>
+    <m-navbar-item
+      value="7"
+    >
+      
+                    Tab 7
+                
+    </m-navbar-item>
+  </m-navbar>
+   
+  <div
+    class="m-slide-transition m--is-left-to-right-transition"
+  >
+    <div
+      class="m-u--margin-top"
+    >
+      <h3
+        class="m-u--no-margin"
+      >
+        Tab 1
+      </h3>
+       
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?
+      </p>
+    </div>
+  </div>
+   
+  <div
+    class="m-u--margin-top--m"
+  >
+    <button
+      class="m-button m--is-skin-primary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        Add tab 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+     
+    <button
+      class="m-button m-u--margin-left m--is-skin-secondary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        Delete tab 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+     
+    <button
+      class="m-button m-u--margin-left m--is-skin-secondary"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      <span
+        class="m-button__text"
+      >
+        Disabled transition 
+        <!---->
+      </span>
+       
+      <!---->
+       
+      <!---->
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/components/transitions/slide-transition/slide-transition.html b/src/components/transitions/slide-transition/slide-transition.html
index 304964bbf..e2d3be41a 100644
--- a/src/components/transitions/slide-transition/slide-transition.html
+++ b/src/components/transitions/slide-transition/slide-transition.html
@@ -1,6 +1,7 @@
 <div class="m-slide-transition"
      :class="{'m--is-left-to-right-transition': isLeftToRight}">
     <transition :name="transitionName"
+                :css="!disabled"
                 @enter="transitionEnter"
                 @after-enter="transitionAfterEnter"
                 @before-leave="transitionBeforeLeave"
diff --git a/src/components/transitions/slide-transition/slide-transition.sandbox.html b/src/components/transitions/slide-transition/slide-transition.sandbox.html
index 8b7b8bae8..d038420b1 100644
--- a/src/components/transitions/slide-transition/slide-transition.sandbox.html
+++ b/src/components/transitions/slide-transition/slide-transition.sandbox.html
@@ -4,7 +4,7 @@ <h2 class="m-u--no-margin">Slide transition</h2>
                         :direction="direction">
         <div v-if="model === 1"
              key="1">
-            <h3>Étape 1</h3>
+            <h3 class="m-u--no-margin">Étape 1</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
@@ -12,13 +12,15 @@ <h3>Étape 1</h3>
         </div>
         <div v-if="model === 2"
              key="2">
-            <h3 style="color: red;">Étape 2</h3>
+            <h3 class="m-u--no-margin"
+                style="color: red;">Étape 2</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
         </div>
         <div v-if="model === 3"
              key="3">
-            <h3 style="color: blue;">Étape 3</h3>
+            <h3 class="m-u--no-margin"
+                style="color: blue;">Étape 3</h3>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
diff --git a/src/components/transitions/slide-transition/slide-transition.scss b/src/components/transitions/slide-transition/slide-transition.scss
index 71d0f064d..6ca618730 100644
--- a/src/components/transitions/slide-transition/slide-transition.scss
+++ b/src/components/transitions/slide-transition/slide-transition.scss
@@ -4,6 +4,18 @@
     position: relative;
     transition: height $m-transition-duration--l ease;
 
+    &.m--is-left-to-right-transition > {
+        .m--is-enter {
+            transform: translate3d(-110%, 0, 0);
+        }
+
+        .m--is-leave-to {
+            transform: translate3d(110%, 0, 0);
+        }
+    }
+}
+
+.m-slide-transition > {
     .m--is-enter-active,
     .m--is-leave-active {
         cursor: not-allowed;
@@ -27,14 +39,4 @@
         transition: transform $m-transition-duration--l ease, opacity $m-transition-duration--l ease;
         position: absolute;
     }
-
-    &.m--is-left-to-right-transition {
-        .m--is-enter {
-            transform: translate3d(-110%, 0, 0);
-        }
-
-        .m--is-leave-to {
-            transform: translate3d(110%, 0, 0);
-        }
-    }
 }
diff --git a/src/components/transitions/slide-transition/slide-transition.stories.ts b/src/components/transitions/slide-transition/slide-transition.stories.ts
new file mode 100644
index 000000000..d02b790cf
--- /dev/null
+++ b/src/components/transitions/slide-transition/slide-transition.stories.ts
@@ -0,0 +1,65 @@
+import { storiesOf } from '@storybook/vue';
+import Vue from 'vue';
+import { componentsHierarchyRootSeparator } from '../../../../conf/storybook/utils';
+import { MButtonSkin } from '../../button/button';
+import { SLIDE_TRANSITION_NAME } from '../../component-names';
+import { MNavbarSkin } from '../../navbar/navbar';
+import SlideTransitionPlugin, { MSlideTransitionDirection } from './slide-transition';
+
+Vue.use(SlideTransitionPlugin);
+
+storiesOf(`${componentsHierarchyRootSeparator}${SLIDE_TRANSITION_NAME}`, module)
+
+    .add('Tabs example', () => ({
+        data: () => ({
+            selectedTabIndex: 1,
+            direction: MSlideTransitionDirection.LeftToRight,
+            nbParagraphe: 1,
+            nbTab: 7,
+            skinNavbar: MNavbarSkin.TabLight,
+            disabledTransiton: false,
+            buttonSkin: MButtonSkin.Secondary
+        }),
+        methods: {
+            showTab(newIndex): void {
+                let _this: any = this as any;
+                _this.direction = (newIndex < _this.selectedTabIndex) ? MSlideTransitionDirection.LeftToRight : MSlideTransitionDirection.RightToLeft;
+                _this.selectedTabIndex = newIndex;
+                _this.nbParagraphe = (_this.selectedTabIndex % 2) === 0 ? 4 : newIndex;
+            }
+        },
+        template: `
+        <div>
+            <m-navbar :selected="selectedTabIndex"
+                      :skin="skinNavbar">
+                <m-navbar-item v-for="index in nbTab"
+                               :key="index"
+                               :value="index"
+                               @click="showTab(index)">
+                    Tab {{index}}
+                </m-navbar-item>
+            </m-navbar>
+            <m-slide-transition :direction="direction"
+                                :disabled="disabledTransiton">
+                <div v-for="index in nbTab"
+                     :key="index"
+                     v-if="selectedTabIndex === index"
+                     class="m-u--margin-top">
+                    <h3 class="m-u--no-margin">Tab {{index}}</h3>
+                    <p v-for="index in nbParagraphe"
+                       :key="index">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A laudantium odio ipsum, quae quos cum dolor, omnis perferendis, veritatis deleniti iusto consectetur? Impedit tempora quam ab laborum maiores sapiente earum?</p>
+                </div>
+            </m-slide-transition>
+            <div class="m-u--margin-top--m">
+                <m-button @click="nbTab++"
+                          :disabled="nbTab === 12">Add tab</m-button>
+                <m-button :skin="buttonSkin"
+                          class="m-u--margin-left"
+                          :disabled="nbTab === 2"
+                          @click="nbTab--">Delete tab</m-button>
+                <m-button :skin="buttonSkin"
+                          class="m-u--margin-left"
+                          @click="disabledTransiton = !disabledTransiton">{{disabledTransiton ? 'Enabled' : 'Disabled'}} transition</m-button>
+            </div>
+        </div>`
+    }));
diff --git a/src/components/transitions/slide-transition/slide-transition.ts b/src/components/transitions/slide-transition/slide-transition.ts
index a43ba1281..16667abd3 100644
--- a/src/components/transitions/slide-transition/slide-transition.ts
+++ b/src/components/transitions/slide-transition/slide-transition.ts
@@ -22,7 +22,7 @@ export class MSlideTransition extends ModulVue {
     @Prop({ default: 0 })
     public scrollToOffset: number; // the offset to add (in case of a sticky header)
 
-    @Prop({ default: false })
+    @Prop({ default: true })
     public disabled: boolean;
 
     public get transitionName(): string | undefined {
@@ -34,11 +34,15 @@ export class MSlideTransition extends ModulVue {
     }
 
     @Emit('enter')
-    private transitionEnter(el: HTMLElement): void {
-        this.$scrollTo.goTo(this.$el as HTMLElement, this.scrollToOffset, ScrollToDuration.Regular);
-        setTimeout(() => {
-            this.transitionBeforeLeave(el);
-        }, 100);
+    private transitionEnter(el: HTMLElement, done): void {
+        if (!this.disabled) {
+            this.$scrollTo.goTo(this.$el as HTMLElement, this.scrollToOffset, ScrollToDuration.Regular);
+            setTimeout(() => {
+                this.transitionBeforeLeave(el);
+            }, 100);
+        } else {
+            done();
+        }
     }
 
     private transitionAfterEnter(): void {
diff --git a/src/components/validation-message/__snapshots__/validation-message.spec.ts.snap b/src/components/validation-message/__snapshots__/validation-message.spec.ts.snap
index b4baf9978..3ccebb321 100644
--- a/src/components/validation-message/__snapshots__/validation-message.spec.ts.snap
+++ b/src/components/validation-message/__snapshots__/validation-message.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`MValidationMessage should render correctly when it is in error 1`] = `
 <div class="m-validation-message">
-  <p name="m--is" class="m-validation-message__error"><svg width="1em" height="1em" class="m-icon m-validation-message__icon">
+  <p name="m--is" css="true" class="m-validation-message__error"><svg width="1em" height="1em" class="m-icon m-validation-message__icon">
       <title>Error</title>
       <use aria-hidden="true"></use>
     </svg> <span class="m-validation-message__text">error</span></p>
@@ -11,7 +11,7 @@ exports[`MValidationMessage should render correctly when it is in error 1`] = `
 
 exports[`MValidationMessage should render correctly when it is in error 2`] = `
 <div class="m-validation-message">
-  <p name="m--is" class="m-validation-message__error"><svg width="1em" height="1em" class="m-icon m-validation-message__icon">
+  <p name="m--is" css="true" class="m-validation-message__error"><svg width="1em" height="1em" class="m-icon m-validation-message__icon">
       <title>Error</title>
       <use aria-hidden="true"></use>
     </svg> <span class="m-validation-message__text">error</span></p>
@@ -20,7 +20,7 @@ exports[`MValidationMessage should render correctly when it is in error 2`] = `
 
 exports[`MValidationMessage should render correctly when it is valid 1`] = `
 <div class="m-validation-message">
-  <p name="m--is" class="m-validation-message__valid"><svg width="1em" height="1em" class="m-icon m-validation-message__icon">
+  <p name="m--is" css="true" class="m-validation-message__valid"><svg width="1em" height="1em" class="m-icon m-validation-message__icon">
       <title>Valid</title>
       <use aria-hidden="true"></use>
     </svg> <span class="m-validation-message__text">valid</span></p>
@@ -29,7 +29,7 @@ exports[`MValidationMessage should render correctly when it is valid 1`] = `
 
 exports[`MValidationMessage should render error message even if there is a valid message 1`] = `
 <div class="m-validation-message">
-  <p name="m--is" class="m-validation-message__error"><svg width="1em" height="1em" class="m-icon m-validation-message__icon">
+  <p name="m--is" css="true" class="m-validation-message__error"><svg width="1em" height="1em" class="m-icon m-validation-message__icon">
       <title>Error</title>
       <use aria-hidden="true"></use>
     </svg> <span class="m-validation-message__text">error</span></p>
@@ -38,6 +38,6 @@ exports[`MValidationMessage should render error message even if there is a valid
 
 exports[`MValidationMessage should render helper message when prop is set 1`] = `
 <div class="m-validation-message">
-  <p name="m--is" class="m-validation-message__helper">help</p>
+  <p name="m--is" css="true" class="m-validation-message__helper">help</p>
 </div>
 `;
diff --git a/src/components/validation-message/validation-message.html b/src/components/validation-message/validation-message.html
index d4a5eac7c..f48b890e2 100644
--- a/src/components/validation-message/validation-message.html
+++ b/src/components/validation-message/validation-message.html
@@ -1,6 +1,6 @@
 <div class="m-validation-message"
      @click="onClick">
-    <m-accordion-transition :transition="transition">
+    <m-accordion-transition :disabled="!transition">
         <p :class="['m-validation-message__' + classMessage]"
            v-if="message">
             <m-icon class="m-validation-message__icon"
@@ -12,7 +12,7 @@
                   v-html="message"></span>
         </p>
     </m-accordion-transition>
-    <m-accordion-transition :transition="transition">
+    <m-accordion-transition :disabled="!transition">
         <p class="m-validation-message__helper"
            v-if="hasHelperMessage"
            v-html="helperMessage"></p>