morevm / vue-transitions Goto Github PK

Actual behavior

The Transitions do not play, the component gets rendered 100 ms after all the other components but the transition does not get played (component has attribute appear)

Expected behavior

Play transition on appear

Steps to reproduce

1. Use Vue 3
2. Add transition
3. add appear

Environment

• Device: Desktop
• OS: Windows 11
• Browser: Chrome 111

Additional context

<script setup>
import { TransitionFade } from "@morev/vue-transitions";
</script>
<template>
            <transition-fade appear :delay="5000">
                <img
                    class="logo"
                    src="@/assets/logos/java-edition.webp"
                    alt="Minecraft: Java Edition"
                />
            </transition-fade>
</template>

Question: Is it required to call app.use even when using the components via import?

Possible solution

No response

Actual behavior

When building, throws error

Failed to resolve import "@morev/vue-transitions/styles" from "virtual:nuxt:/app/.nuxt/css.mjs". Does the file exist?

Expected behavior

Should've resolved the import

Steps to reproduce

• Added the package with bun add @morev/vue-transitions/nuxt
• Added into Nuxt's modules

// nuxt.config.ts
modules: [
    ...
    "@morev/vue-transitions/nuxt",
  ],

• Use it is any of view files e.g Test.vue

<TransitionSlide :offset="[-16, 0]">
    content
</TransitionSlide>

Environment

• Device: 2019 16" MBP (Intel)
• OS: Sonoma 14.2

Additional context

No response

Possible solution

Possibly updating the package to have the styles imported properly.

Question

Hey, did anyone get it work with the modal component from the Headless UI? I use bulit-in transitions with all my custom components as well as with some Headless UI components like dropdown. In all those cases it does work fine. But the modal component from Headless UI is a bit different and it seems to work only with Headless UI transition components (TransitionRoot etc.), whereas built-in transitions make no difference and the modal pops up immediately. Is there any way to

Actual behavior

Importing VueTransitions shows TS error.

Expected behavior

Importing should be fine.

Steps to reproduce

main.ts:

import './assets/main.css';

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
import { createApp } from 'vue';
import VueTransitions from '@morev/vue-transitions';
import '@morev/vue-transitions/styles';

import App from './App.vue';
import router from './router';

const app = createApp(App);

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

app.use(pinia);
app.use(router);
app.use(VueTransitions);

app.mount('#app');

Error:

Could not find a declaration file for module '@morev/vue-transitions'. '.../node_modules/.pnpm/@[email protected][email protected]/node_modules/@morev/vue-transitions/dist/vue-transitions.es.js' implicitly has an 'any' type.
  There are types at '.../node_modules/@morev/vue-transitions/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@morev/vue-transitions' library may need to update its package.json or typings.ts(7016)

Environment

• OS: Windows 11
• vue 3.3.11
• typescript 5.3.0
• vite 5.0.10

Additional context

No response

Possible solution

No response

Actual behavior

Expected behavior

Expand from bottom to to when element postion in bottom

Steps to reproduce

<header class="fixed top-0 w-full">
 <div>Content</div>
  <transition-expand>
    <div v-show="currentNavPanel"></div>
  </transition-expand>
</footer>    
<footer class="fixed bottom-0 w-full">
  <transition-expand>
    <div v-show="currentNavPanel"></div>
  </transition-expand>
 <div>Content</div>
</footer>

Environment

• Device:Desktop
• OS:Windows 11
• Browser:Chrome 116

Additional context

No response

Possible solution

No response

Question

Can i use tag prop with class like this?

<transition-fade group tag="ul" class="flex">
   <a>test</a>
   <component/>
</transition-fade>

• Resolve #251
• Fix type generation for Nuxt 3
• Regenerate Nuxt transitions if node_modules folder is updated while dev server is running
• Support for prefers-reduced-motion
• Find a way to get rid of postinstall hook since it does not run in Bun and is generally a potential point of failure
• Find a way to run transition-group elements consequently
• Write documentation using specialized tools
• Add additional preset pages in addition to the current playgroud

Question

My node version is 16.10.0(npm v7.24.0). What is my missing?