Skip to content

Commit

Permalink
Expose more props, add scale example (#3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattrothenberg
mattrothenberg authored Apr 13, 2019
1 parent e165247 commit 95c1126
Show file tree
Hide file tree
Showing 8 changed files with 300 additions and 50 deletions.
15 changes: 9 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@ This library strives to imitate its parent, `react-flip-toolkit`, as closely as
**Props**

| prop | default | type | details |
| ------------------------ | ------------ | -------- | ----------------------------------------------------------------------------------------------------------------- |
| `className` | – | `string` | A class that will apply to the div rendered by `Flipper` |
| `flipKey` **(required)** | – | `string` | Changing this tells `vue-flip-toolkit` to transition child elements wrapped in Flipped components. |
| `spring` | `"noWobble"` | `string` | Provide a string referencing one of the spring presets — `noWobble`, `veryGentle`, `gentle`, `wobbly`, or `stiff` |
| `staggerConfig` | `{}` | `object` | Provide configuration for staggered Flipped children. |
| prop | default | type | details |
| ------------------------ | ------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | – | `string` | A class that will apply to the div rendered by `Flipper` |
| `flipKey` **(required)** | – | `string, number, boolean` | Changing this tells `vue-flip-toolkit` to transition child elements wrapped in Flipped components. |
| `spring` | `"noWobble"` | `string, object` | Provide a string or referencing one of the spring presets — `noWobble`, `veryGentle`, `gentle`, `wobbly`, or `stiff`. Otherwise, pass a [custom spring object](https://codepen.io/aholachek/full/bKmZbV/) |
| `staggerConfig` | `{}` | `object` | Provide configuration for staggered Flipped children. |

### Flipped.vue

Expand All @@ -48,6 +48,9 @@ This library strives to imitate its parent, `react-flip-toolkit`, as closely as
| `stagger` | – | `string` | Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |
| `shouldInvert` | – | `function` | A function provided with the current and previous `decisionData` props passed down by the Flipper component. Returns a boolean indicating whether to apply inverted transforms to all `Flipped` children that request it via an `inverseFlipId`. |
| `shouldFlip` | – | `function` | A function provided with the current and previous decisionData props passed down by the `Flipper` component. Returns a `boolean` to indicate whether a `Flipped` component should animate at that particular moment or not. |
| `opacity` | false | `boolean` | |
| `scale` | false | `boolean` | Tween `scaleX` and `scaleY` |
| `translate` | false | `boolean` | Tween `translateX` and `translateY` |

**Events**

Expand Down
49 changes: 38 additions & 11 deletions dist/vue-flip-toolkit.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,19 @@ var script = {
inverseFlipId: String,
stagger: String,
shouldFlip: Function,
shouldInvert: Function
shouldInvert: Function,
scale: {
type: Boolean,
default: false
},
opacity: {
type: Boolean,
default: false
},
translate: {
type: Boolean,
default: false
}
},
mounted() {
if (this.flipId) {
Expand All @@ -17,12 +29,18 @@ var script = {
shouldInvert: this.shouldInvert,
onStart: el => this.$emit("on-start", { el, id: this.flipId }),
onComplete: el => this.$emit("on-complete", { el, id: this.flipId }),
stagger: this.stagger
stagger: this.stagger,
opacity: this.opacity,
scale: this.scale,
translate: this.translate
});
} else if (this.inverseFlipId) {
this.addInvertedElement({
element: this.$el,
parent: this.$parent.$el
parent: this.$parent.$el,
opacity: this.opacity,
scale: this.scale,
translate: this.translate
});
}
},
Expand Down Expand Up @@ -1967,12 +1985,12 @@ var script$1 = {
},
props: {
className: String,
flipKey: [String, Number, Boolean],
staggerConfig: Object,
spring: {
type: String,
type: [String, Object],
default: "noWobble"
},
flipKey: String,
staggerConfig: Object
}
},
data() {
return {
Expand All @@ -1988,7 +2006,10 @@ var script$1 = {
shouldFlip,
shouldInvert,
onStart,
onComplete
onComplete,
opacity,
scale,
translate
}) {
this.flipInstance.addFlipped({
element,
Expand All @@ -1997,14 +2018,20 @@ var script$1 = {
...(shouldFlip ? { shouldFlip } : undefined),
...(shouldInvert ? { shouldInvert } : undefined),
...(onStart ? { onStart } : undefined),
...(onComplete ? { onComplete } : undefined)
...(onComplete ? { onComplete } : undefined),
opacity,
scale,
translate
});
},
addInvertedElement({ element, parent }) {
addInvertedElement({ element, parent, opacity, scale, translate }) {
this.$nextTick(() => {
this.flipInstance.addInverted({
element,
parent
parent,
opacity,
scale,
translate
});
});
}
Expand Down
49 changes: 38 additions & 11 deletions dist/vue-flip-toolkit.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,19 @@ var VueFlipToolkit = (function (exports) {
inverseFlipId: String,
stagger: String,
shouldFlip: Function,
shouldInvert: Function
shouldInvert: Function,
scale: {
type: Boolean,
default: false
},
opacity: {
type: Boolean,
default: false
},
translate: {
type: Boolean,
default: false
}
},
mounted() {
if (this.flipId) {
Expand All @@ -20,12 +32,18 @@ var VueFlipToolkit = (function (exports) {
shouldInvert: this.shouldInvert,
onStart: el => this.$emit("on-start", { el, id: this.flipId }),
onComplete: el => this.$emit("on-complete", { el, id: this.flipId }),
stagger: this.stagger
stagger: this.stagger,
opacity: this.opacity,
scale: this.scale,
translate: this.translate
});
} else if (this.inverseFlipId) {
this.addInvertedElement({
element: this.$el,
parent: this.$parent.$el
parent: this.$parent.$el,
opacity: this.opacity,
scale: this.scale,
translate: this.translate
});
}
},
Expand Down Expand Up @@ -1970,12 +1988,12 @@ var VueFlipToolkit = (function (exports) {
},
props: {
className: String,
flipKey: [String, Number, Boolean],
staggerConfig: Object,
spring: {
type: String,
type: [String, Object],
default: "noWobble"
},
flipKey: String,
staggerConfig: Object
}
},
data() {
return {
Expand All @@ -1991,7 +2009,10 @@ var VueFlipToolkit = (function (exports) {
shouldFlip,
shouldInvert,
onStart,
onComplete
onComplete,
opacity,
scale,
translate
}) {
this.flipInstance.addFlipped({
element,
Expand All @@ -2000,14 +2021,20 @@ var VueFlipToolkit = (function (exports) {
...(shouldFlip ? { shouldFlip } : undefined),
...(shouldInvert ? { shouldInvert } : undefined),
...(onStart ? { onStart } : undefined),
...(onComplete ? { onComplete } : undefined)
...(onComplete ? { onComplete } : undefined),
opacity,
scale,
translate
});
},
addInvertedElement({ element, parent }) {
addInvertedElement({ element, parent, opacity, scale, translate }) {
this.$nextTick(() => {
this.flipInstance.addInverted({
element,
parent
parent,
opacity,
scale,
translate
});
});
}
Expand Down
49 changes: 38 additions & 11 deletions dist/vue-flip-toolkit.umd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,19 @@
inverseFlipId: String,
stagger: String,
shouldFlip: Function,
shouldInvert: Function
shouldInvert: Function,
scale: {
type: Boolean,
default: false
},
opacity: {
type: Boolean,
default: false
},
translate: {
type: Boolean,
default: false
}
},
mounted() {
if (this.flipId) {
Expand All @@ -23,12 +35,18 @@
shouldInvert: this.shouldInvert,
onStart: el => this.$emit("on-start", { el, id: this.flipId }),
onComplete: el => this.$emit("on-complete", { el, id: this.flipId }),
stagger: this.stagger
stagger: this.stagger,
opacity: this.opacity,
scale: this.scale,
translate: this.translate
});
} else if (this.inverseFlipId) {
this.addInvertedElement({
element: this.$el,
parent: this.$parent.$el
parent: this.$parent.$el,
opacity: this.opacity,
scale: this.scale,
translate: this.translate
});
}
},
Expand Down Expand Up @@ -1973,12 +1991,12 @@
},
props: {
className: String,
flipKey: [String, Number, Boolean],
staggerConfig: Object,
spring: {
type: String,
type: [String, Object],
default: "noWobble"
},
flipKey: String,
staggerConfig: Object
}
},
data() {
return {
Expand All @@ -1994,7 +2012,10 @@
shouldFlip,
shouldInvert,
onStart,
onComplete
onComplete,
opacity,
scale,
translate
}) {
this.flipInstance.addFlipped({
element,
Expand All @@ -2003,14 +2024,20 @@
...(shouldFlip ? { shouldFlip } : undefined),
...(shouldInvert ? { shouldInvert } : undefined),
...(onStart ? { onStart } : undefined),
...(onComplete ? { onComplete } : undefined)
...(onComplete ? { onComplete } : undefined),
opacity,
scale,
translate
});
},
addInvertedElement({ element, parent }) {
addInvertedElement({ element, parent, opacity, scale, translate }) {
this.$nextTick(() => {
this.flipInstance.addInverted({
element,
parent
parent,
opacity,
scale,
translate
});
});
}
Expand Down
24 changes: 21 additions & 3 deletions src/Flipped.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,19 @@ export default {
inverseFlipId: String,
stagger: String,
shouldFlip: Function,
shouldInvert: Function
shouldInvert: Function,
scale: {
type: Boolean,
default: false
},
opacity: {
type: Boolean,
default: false
},
translate: {
type: Boolean,
default: false
}
},
mounted() {
if (this.flipId) {
Expand All @@ -18,12 +30,18 @@ export default {
shouldInvert: this.shouldInvert,
onStart: el => this.$emit("on-start", { el, id: this.flipId }),
onComplete: el => this.$emit("on-complete", { el, id: this.flipId }),
stagger: this.stagger
stagger: this.stagger,
opacity: this.opacity,
scale: this.scale,
translate: this.translate
});
} else if (this.inverseFlipId) {
this.addInvertedElement({
element: this.$el,
parent: this.$parent.$el
parent: this.$parent.$el,
opacity: this.opacity,
scale: this.scale,
translate: this.translate
});
}
},
Expand Down
Loading

0 comments on commit 95c1126

Please sign in to comment.