Easy and natural state transitions
Check out the docs and the Demo
npm install --save vue-motion
npm run dev
Thanks to @chenglou and all who contributed to react-motion, from which, this project was inspired.
Easy and natural state transitions
Home Page: https://posva.net/vue-motion
License: MIT License
Easy and natural state transitions
Check out the docs and the Demo
npm install --save vue-motion
npm run dev
Thanks to @chenglou and all who contributed to react-motion, from which, this project was inspired.
...
VueMotion.presets.custom = {}
<Motion spring="custom">...</Motion>
Ok. This example from Docs make no sense for me. Sorry.
<Motion :value="offset" tag="div">
<div slot-scope="props" :style="{ transform: `translateX(${props.value}px)` }"></div>
</Motion>
// in the component
this.offset = 200
component
you are talking about?this.offset
?props
?Public API for the Motion component that would allow to read and set currentVelocities
. Not sure if this would set idealVelocities
as well.
Use case adding a new value, setting the velocity to an existing one
I don't think it's that useful but hey, it's so fancy
The current state of this feature: โ Not worth the cost implementing
If you know of any other use cases that would make this feature worth adding, please, share them ๐
I can't properly access https://posva.net/vue-motion/ ๐ค
Like in the title. The websites are down :(
Hi, first of all, I love the library! but i'm struggling to create a dynamic carrousel that appends / removes items in a list. I get errors for the items that do not exist yet in the new list. Is there a way to provide default values for new items?
Simple example:
<template>
<ul>
<Motion :values="children">
<div slot-scope="_children">
<div v-for="(child, index) in _children" :key="index">
<p>{{child.offset}}</p>
</div>
</div>
</Motion>
<button v-on:click="testPush">test Push</button>
<button v-on:click="test">test</button>
</ul>
</template>
<script lang="ts">
import { Motion } from "vue-motion"
export default {
components: {
Motion
},
data() {
return {
children: [{
offset: 0,
}],
}
},
methods: {
test() {
this.$data.children = [{offset: 100}, {offset: 200}]
},
testPush() {
this.$data.children.push({offset: 200})
}
}
}
</script>
Thanks!
Hi, would be great to have more control on animations...
Or, one option could be add a preset animation instant
to disable animation ...
Hi @posva , thanks for bringing react plugin into vue world. But it seems currently the demo was broken, when I open the link on the description above, it didn't show anything. I saw the console and this message was appear.
I want to hide the non selected items, only after the animation ends (because if I remove them before the animation breaks) but I am experiencing a bit of delay as you can see in the video below.
Any suggestions?
I have problem with mouse events in nuxt.
My Codesanbox link: https://codesandbox.io/s/summer-haze-m6dvr?file=/pages/index.vue
My position will not always update inside the motion component, only somtimes after a lot reloads it works. Sometimes just for a short time.
Support nested objects for values
:
values: {
size: {
width: 300,
height: 200,
},
}
<Motion :values="values">
<template scope="_values">
{{ _values.size.width }}x{{ _values.size.height }}
</template>
</Motion>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.