Comments (8)
I am really sorry for the late answer.
I am looking forward to implement something like you mentioned (I understand the will to have a similar approach as v-show
but animated).
That will be made possible by <Motion>
component in v2 (#81 )
from motion.
Hello :)
Thanks for the suggestion!
Could you provide examples of usage?
I would love to review a PR on that!
Let me know if anything is needed!
from motion.
Hi,
Thanks for the response. Height preset will allow creating components like collapse easily.
Generally, when I want to create collapse I use v-show
which doesn't trigger any animation. I am curious if vueuse/motion can provide something which we can combine with v-show or we can replace v-show with to create an animated collapse.
The reason I didn't do it myself is I don't know much about animation and more specifically I don't have much experience in vue animation via JS. Also, animating height is a bad idea to achieve 60fps smooth animation so experts might know how to achieve smooth animation for things like collapse.
Example of BSV: https://bootstrap-vue.org/docs/components/collapse
from motion.
Hey! 👋🏻
So, how would one make a collapse as of today?
With this kind of variant?
{
initial: {
opacity: 0,
height: 0
},
enter: {
opacity: 1,
height: "auto"
}
}
Right now, height: auto
is not defined. Am I missing something basic? 😄
from motion.
@handhikadj I know that sine other do but I don't want to bring the big guns/have something external.
In the end, I found a CSS solution anyway so it's better. 😁
from motion.
@kissu, could you post what your solution was so that others have an idea in the meantime?
from motion.
@SelfhostedPro I pretty much used a blend between the 2 techniques described here. Really depends on your use-case but fixing it with CSS-only is probably the best way.
This one may also be quite useful depending on the browsers you need to support.
from motion.
I achieved this with useElementSize
from core.
<template>
<div
ref="containerRef"
:style="{ height }"
:aria-hidden="expanded ? undefined : 'true'"
:inert="expanded ? undefined : ''"
class="relative z-50 overflow-hidden bg-neutral-950 pt-2 transition-all duration-300 will-change-[height]"
>
...
</div>
</template>
<script setup lang="ts">
import { useElementSize } from "@vueuse/core"
const { expanded } = useNavigation()
const containerRef = ref<HTMLElement>()
const content = ref<string>()
const { height: targetHeight } = useElementSize(content, undefined, {
box: "border-box",
})
const height = computed(() => (expanded.value ? `${targetHeight.value}px` : '0.5rem'))
onMounted(() => {
content.value = containerRef.value?.children[0]
})
</script>
from motion.
Related Issues (20)
- [Bug Report] Since v2.1.0, animations no longer work when navigating back between routes from the bottom of a page HOT 9
- CSS Custom properties support? HOT 1
- Unable to use leave in jsx file
- explain how work with useMotion
- Hover on nested element removes "hovered" styles HOT 4
- Custom directives/presets do not work for Motion components HOT 2
- motion component applied expired styles after component updated HOT 1
- Bug with amimations for several components by key property change HOT 1
- Add useVelocity method
- Disable bounce (spring) on default presets? HOT 1
- `v-motion-slide-visible-once-right` causes overflow on smaller devices HOT 2
- Component Jitters at Screen Edges When Using `v-motion` Slide Presets Along Y-Axis HOT 3
- `useSpring` example only has text description but no demonstration
- Nuxt 3 Error with custom directives HOT 5
- `motionProperties` is not assignable to type 'Partial<PermissiveMotionProperties> for `useSpring`
- directives does not auto complete on IDE HOT 1
- TypeScript Error with Auto-Imported Exports After Installing @vueuse/motion HOT 1
- Feature Request: Support for Directives to Handle Layout Shifting HOT 1
- Avoid using of `import.meta.env.DEV` since it's not always available
- Why it's don't works? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from motion.