Javascript 如何向vue js中的组件添加基本动画

我正在看vue官方的动画文档，我对如何从vues网站实现以下示例感到困惑

Vue.transition('fade', {
  css: false,
  enter: function (el, done) {
    // element is already inserted into the DOM
    // call done when animation finishes.
    $(el)
      .css('opacity', 0)
      .animate({ opacity: 1 }, 1000, done)
  },
  enterCancelled: function (el) {
    $(el).stop()
  },
  leave: function (el, done) {
    // same as enter
    $(el).animate({ opacity: 0 }, 1000, done)
  },
  leaveCancelled: function (el) {
    $(el).stop()
  }
})

进入我的vue根

var v_root = new Vue({
    delimiters: [ '[[', ']]' ],
    el: '#vue-job',
    data: {
        job_s: []
    },
    created() {
        url="http://{{ api_endpoint }}"
        fetch(url)
            .then(response => response.json())
            .then(body => {
}}

是否需要将其添加到我的组件中？

工作示例：

  <transition
          v-bind:css="false"
          v-on:before-enter="beforeEnter"
          v-on:enter="enter"
          v-on:leave="leave"
    >
    <p v-if="show">hello</p>
   </transition>

你好

另一个例子：

淡入淡出组件：

不带按钮：

组件：

Vue.component('greeting', {
  template: '<h1>Welcome here!</h1>'
});

模板

<div id="app">
      <transition name="fade" appear mode="out-in">
        <greeting></greeting>
      </transition>
</div>

工作示例：

---

我希望这符合您的要求。：）

我想淡出整个组件，我已经添加了另一个小提琴，我希望这有帮助！我在玩你的小提琴，我看到如果我移除按钮，当页面加载时，组件不会褪色。加载组件时（而不是单击按钮时），如何使组件淡入淡入？我想使用您的示例，但删除了单击按钮

<div id="app">
      <transition name="fade" appear mode="out-in">
        <greeting></greeting>
      </transition>
</div>

.fade-enter-active, .fade-leave-active {
  transition: opacity .95s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}