如何在Vue.js组件中添加基本动画

Question

我正在查看官方的Vue动画文档，不太清楚如何实现Vue网站上的以下示例。

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 => {
}}

我需要将这个添加到我的组件中吗？

- david

Answer 1

工作示例：

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

另一个示例：

渐变组件： https://jsfiddle.net/nehadhiman6/4dpr7kmu/5/

渐隐渐显组件： https://jsfiddle.net/ayo7fL4t/

- Neha

---

我想要淡化整个组件。 - david

我已经添加了另一个代码片段，希望这可以帮到你！ - Neha

我在玩你的小提琴时发现，如果我移除按钮，组件在页面加载时不会淡入。如何在组件加载时淡入（而不是在按钮点击时）？ - david

我想使用你的例子，但是删除按钮点击。 - david

Answer 2

没有按钮：

组件：

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

// 创建一个新的Vue实例a

var vm = new Vue({
  el: '#app',

});

Template

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

CSS：

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

工作示例： https://jsfiddle.net/nehadhiman6/r52vp7ah/3/

希望这符合您的要求。 :)

- Neha