trying to use vue CSS Transitions

Question

https://v2.vuejs.org/v2/guide/transitions.html

the doc has been poorly written here. I don't know at what stage it says to install something extra but from what I read there is nothing extra to install.

"Just place a <transition> tag in your vue, you'll see, it'll work" says the doc :

the button does nothing on click.

what could I be missing?

https://v2.vuejs.org/v2/guide/transitions.html

try it you can literally copy-paste their code (all three parts) it doesn't work.

UPDATE:

So I as told by I craig_h I indeed don't have my data's showing up.

here's my code :

import Vue from 'vue'
import App from './App'
import BootstrapVue from 'bootstrap-vue'
import router from './router'
import Header from './components/header/Header.vue'
import LateralMenu from './components/lateralmenu/LateralMenu.vue'
import Example from './components/example.vue'

Vue.config.productionTip = false
Vue.component('Header', Header)
Vue.component('LateralMenu', LateralMenu)
Vue.component('Example', Example)
Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
new Vue({
  el: '#nav',
  template: '<Header/>'
})
new Vue({
  el: '#lateral-menu',
  template: '<LateralMenu/>',
  data: {
    reveal: true,
    show: true
  }
})
new Vue({
  el: '#example-1',
  template: '<Example/>',
  data: {
    show: true
  }
})

Answer 1

Vue doesn't come with out-of-the-box animations, so you have to add them to your css. This is the one they provide on they website.

Note how the naming of the animation corresponds to the name within the view component.

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}