试图使用vue CSS Transitions

Question

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

这里的文档编写得很糟糕。我不知道它在什么阶段安装额外的东西，但从我读到的内容中没有什么可以安装的。

＆＃34;只需在您的vue中添加<transition>标记，您就会看到，它会工作＆＃34;医生说：

按钮在点击时不执行任何操作。

我能错过什么？

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

尝试一下，你可以直接复制粘贴代码（所有三个部分）它不起作用。

更新：

所以我告诉我Craig_h我确实没有出现我的数据。

这是我的代码：

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没有开箱即用的动画，所以你必须将它们添加到你的CSS中。这是他们在网站上提供的那个。

请注意动画的命名如何与视图组件中的名称相对应。

/* 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;
}