rachmanzz / vue-inview Goto Github PK

How can we get the current element triggered when we call something like.

<div v-inview:enter="methods"></div>

How can I check if an element is fully viewed if it does not fit on the screen (more than the viewport).

That is, for example, I have to understand that the user has scrolled the item from beginning to end

HI, Firstly i thnk this libary is great. Thanks very much!

I have this: v-inview:class="['a-inview--active']"

on a load of different elements. it works when the page first renders.

But when i scroll new elements into view, the class is not added.

Do i need to add some directive to teh scrolling parent to make it work? if i rotate my screen and back it seems to work... just not when i scroll. my container.

Please can you advise? thanks in advance.

Hi! Is there any way to forbid adding classes to the elements with v-inview? Because it adds classes that can start with numbers, I get the following error:

DOMException: Failed to execute 'querySelectorAll' on 'Document': '.35YItMYvg2' is not a valid selector.

I get the following errors.

error "gulp-uglify#uglify-js" is wrong version: expected "3.7.4", got "3.4.10"
error "uglify-js#commander" is wrong version: expected "2.20.3", got "2.19.0"
error "html-minifier#uglify-js" not installed
error "html-minifier#uglify-js#commander" not installed

We're getting an Uncaught ReferenceError: _$mdf is not defined as elements exit

Is this a typo, and should be $mdf?

Using master v1.0.2

Thanks

Hi,

You plugin is using classList which is sadly not understood in ie9.

luckily there is a polyfill for that: classlist-polyfill

Up to you if you want to include it in your library yourself or maybe nice to add in the README that if you need ie9 support you need to include the polyfill as well.

Hey just a simple - maybe uninformed/stupid question - could you please describe how to correctly set a Offset Value. I tried it like this:

import Inview from 'vue-inview';
Vue.use(Inview);

Inview.threshold('100px')
Inview.offset('1000px');

Could you tell me what I did wrong. Kinda confused by your documented way with

// v_inview.offset(/* offset */)
// v_inview.threshold(/* threshold */)

Keep up the good work 💯 !

I'm getting the following error when trying to build & deploy a project that contains the vue-inview package. Using Yarn as a package manager.

yarn install v1.22.1
[1/5] Validating package.json...
[2/5] Resolving packages... 
Fetching packages... 
warning Pattern ["vueinview@rachmanzz/vue-inview"] is trying to unpack in the same destination "/home/rof/cache/yarn/v6/npm-vueinview-1.0.6-beta.1/node_modules/vueinview" as pattern ["vueinview@github:rachmanzz/vue-inview"].
This could result in non-deterministic behavior, skipping. 

Why are the inview firing first time the page loads?

main.js file

import Inview from 'vueinview'
Vue.use(Inview)
Inview.offset(100)
// Inview.threshold(0.3)

Home.vue

<div style='height: 100vh;'></div>
<div v-inview:once='triggerMethod'></div>

...

methods: {
   triggerMethod() {
      console.log('hello there')
   }
}

When the page load i get 'hello there' in the console, but the div isnt in the view

Obs: using this source -> github:rachmanzz/vue-inview

I tried to setup the offset, but I will get always undefined.

My setup as Nuxt Plugin

import Vue from 'vue'
import Inview from 'vueinview'
Inview.offset({
  top: 100,
  right: 75,
  bottom: 50,
  left: 25
})

Vue.use(Inview)
`

First thanks for making the wrapper.

If we use like the readme the "Magic properties" it causes high CPU "sync".
Check in chromedev and find the culprit...

/**
  * (update → function)
    - life cycle update
**/
var updateLifeCycle = function (update) {
  var sync = function () {
    update()
    setTimeout(sync,0)
  }
  sync()
}

Perhaps increase the setTimeout?

I need other contributors to deal with some issues.
if anyone has spare time to contribute. I am so glad.
I have many projects I'm working on

Hi, I seem to get this error when some components re-enter the viewport.

main.js:1413 Uncaught TypeError: Cannot read property 'class' of undefined
    at _element_enter (main.js:1413)
    at Array.enter (main.js:1626)
    at t.value (main.js:279)
    at main.js:279
    at Array.forEach (<anonymous>)
    at t.value (main.js:279)
    at main.js:279
    at Array.forEach (<anonymous>)
    at main.js:279
    at r (main.js:279)
    at p (main.js:279)
    at h (main.js:279)

Just started getting this since the new fixes:

ReferenceError: el is not defined
at _classList.add (vue-inview.js?0bdf:61)
at _$elinview (vue-inview.js?0bdf:573)
at inserted (vue-inview.js?0bdf:677)
at callHook$1 (vue.esm.js?65d7:5855)
at callInsert (vue.esm.js?65d7:5797)
at wrappedHook (vue.esm.js?65d7:1886)
at Object.invoker [as insert] (vue.esm.js?65d7:1817)
at invokeInsertHook (vue.esm.js?65d7:5541)
at Vue$3.patch [as patch] (vue.esm.js?65d7:5744)
at Vue$3.Vue._update (vue.esm.js?65d7:2450)

Using latest chrome.
It's erroring on this:

.orb-wrapper(v-inview:once.enter='showOrb')

Dev Board
https://trello.com/b/AfdhRm5p/vue-inview-development

Plan:

• new directive and bind name
• Fire on Scope

I like the integrations with animate.css but it doesn't quite have the animations I want. How can I easily add custom animations? It doesn't seem to recognize my own animations.