vue-transition-on-scroll
Advanced tools
+1
-1
| { | ||
| "name": "vue-transition-on-scroll", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "It is Vue.js plugin. When you scroll, you can give the transition effect to the internal objects", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
+4
-4
@@ -22,9 +22,9 @@ # Transition On Scroll | ||
| <div id="scroll1"> | ||
| <trans-on-scroll wrapper=".scroll-transition" repeat>from default(top)</trans-on-scroll> | ||
| <trans-on-scroll wrapper="scroll-transition" repeat>from default(top)</trans-on-scroll> | ||
| </div> | ||
| <div id="scroll2"> | ||
| <trans-on-scroll wrapper=".scroll-transition" repeat from="right">from right</trans-on-scroll> | ||
| <trans-on-scroll wrapper="scroll-transition" repeat from="right">from right</trans-on-scroll> | ||
| </div> | ||
| <div id="scroll3"> | ||
| <trans-on-scroll wrapper=".scroll-transition" repeat from="left">from left</trans-on-scroll> | ||
| <trans-on-scroll wrapper="scroll-transition" repeat from="left">from left</trans-on-scroll> | ||
| </div> | ||
@@ -76,4 +76,4 @@ </div> | ||
| | from | transition direction from | String | top/right/left/bottom | top | | ||
| | wrapper | wrapper is scrollable box what box wrapped targets | String | only id | window | | ||
| | wrapper | it is scrollable box that is wrapping objects | String | only class name | window | | ||
| | distance | distance of trasition | String | long/normal/short | normal | | ||
| | repeat | whether repeat transiton effect | Boolean | - | false | |
@@ -19,3 +19,6 @@ <template> | ||
| type: [String, Boolean], | ||
| default: false | ||
| default: false, | ||
| validator: function (value) { | ||
| return !str.startsWith(".") | ||
| } | ||
| }, | ||
@@ -83,3 +86,3 @@ distance: { | ||
| }else{ | ||
| that.wrapperObj = document.querySelector(that.wrapper) | ||
| that.wrapperObj = document.querySelector('.'+that.wrapper) | ||
| } | ||
@@ -86,0 +89,0 @@ that.wrapperObj.addEventListener('scroll', function () { |
9122
0.9%