Similar Vuejs animation in Jquery

Asked

Viewed 271 times

2

I use a code in jQuery to make an animation to load the page, as I do the same with Vuejs?

(function ($) {
      "use strict";
      (function ($) {
        "use strict";
        var uza_window = $(window);
        uza_window.on("load", function () {
          $("#preloader").fadeOut("1000", function () {
            $(this).remove();
          });
        });
      })(jQuery);
    })(jQuery);
jquery vue.js

  • would that be so? https://br.vuejs.org/v2/guide/transitions.html

  • https://codepen.io/rovalx/pen/aOEXPG

  • kind of link

  • but wanted to know if there is something native from vuejs to do, I know with js

  • If what you want is a Download that initializes with the page and after a certain amount of screen time, there is nothing native in Vue, you will have to implement on your own or use a css framework like Vuetify that already comes with these features like these loading: https://vuetifyjs.com/pt-BR/Components/Progress

  • So I’m going to have to use jquery, apparently, to know the right time to stop

  • Dude if you are using Vue do not have the slightest need to use jQuery. There are several ways to do this, one of them is with setTimeout().

  • But the setTimeout will just set a timer, and not the exact loading time, I did with Vue using setTimeout, but only the animation appears when loading the page, and not on the loading

Show 3 more comments

1 answer

2


You can use the states of lifecycle of the Vue instance to keep a loading component visible as in the example below.

When your page is loaded it will invoke the method mounted, in it you can define that the loading component can be hidden. 

Vue.component("loading", {
  template: "<div v-if=\"isLoading\">Carregando...</div>",
  props: ["isLoading"],
})

Vue.component("my-page", {
  template: `
    <div>
      <loading :is-loading="!loaded"/>
      <div v-if="loaded">
      Olá mundo!
      </div>
    </div>
  `,
  data() {
    return {
      loaded: false
    }
  },
  mounted() {
    let self = this
    setTimeout(function() {
      self.loaded = true
    }, 3000)
  }
})


new Vue({
  el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <my-page/>
</div>

Browser other questions tagged jquery vue.js

You are not signed in. Login or sign up in order to post.