Question

我正在查看有关动画的官方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 => {
}}

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

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/posva/khd2ur97/

另一个示例： https://jsfiddle.net/ayo7fL4t/

淡入淡出部分： https://jsfiddle.net/nehadhiman6/4dpr7kmu/5/

Answer 2

无按钮：

组件：

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

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

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

});

模板

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

我希望这可以满足您的要求。：）

如何在Vue JS中向组件添加基本动画

2 个答案: