尝试使用 vue CSS 转换

Question

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

这里的文档写得不好。我不知道它说在什么阶段安装额外的东西，但从我读到的内容来看，没有什么额外的安装。

"Just place a <transition> tag in your vue, you'll see, it'll work" 文档说：

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

我可能遗漏了什么？

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

尝试使用 vue CSS 转换

trying to use vue CSS Transitions

transition

npm

vue.js

vuejs2