I'm still pretty new to Vue but I'm trying to apply a transition-group wrapper to a v-for group of divs and there is no impact at all after adding the following.
Is anyone able to see something wrong here?
This is a simplified version of the template:
<template>
<main>
<div class="notes">
<transition-group name="sort" tag="div" appear>
<div v-for="post in posts" :key="post.id">
<SinglePost :post="post" />
</div>
</transition-group>
</div>
</main>
</template>
And the styles tag:
<style scoped>
/* TRANSITION */
.sort-enter-active, .sort-leave-active {
transition: opacity .5s;
}
.sort-enter {
transform: translateY(10px);
opacity: 0;
}
.sort-move {
transition: transform .5 ease-out;
}
</style>
Related
I have a modal component that handles the overlay and css etc. and allows for modal content to be passed in via a slot:
<div class="slot-content">
<slot></slot>
</div>
And it's being used like
<Modal ...>
<div class="some-modal-content-div">
...
</div
</Modal>
Currently the modal appearance is a bit "abrupt".
I do want the overlay be there instantly, but would like to add a bit of a transition to the appearance of the content div.
How do I add a <Transition> to just the slot content?
If I understood you correctly maybe like following snippet:
const app = Vue.createApp({
data() {
return {
show: false,
};
},
})
app.component('modal', {
template: `
<div class="slot-content">
<p>other content</p>
<transition name="slide-fade" appear>
<slot></slot>
</transition>
</div>
`
})
app.mount('#demo')
.slide-fade-enter-active {
transition: all 0.5s ease-out;
}
.slide-fade-leave-active {
transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(20px);
opacity: 0;
}
.mod {
border: 1px solid purple;
}
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<button #click="show = !show">show</button>
<modal v-if="show" class="mod">
<div class="some-modal-content-div">
<b>slot content</b>
</div>
</modal>
</div>
I was actually too fixated on using the vue Transition instead of just applying the css animation directly to the slot content container:
<div class="slot-content animate-class">
<slot></slot>
</div>
...
.animate-class {
animation: foo 0.1s;
}
I want a transition in my VueJS 3 project between 2 pages. I have a button and when I click on it, it goes on a new page with a dynamic URL. I would like a transition here. I don't have any errors but there is no transition when I change the page. I don't know why. It's true that initially I didn't had a <router-view/> tag, I had to add it to make the transition, maybe it doesn't use the router-view when it is changing the page so doesn't see the transition.
Here my code :
<template>
<div class="p-grid">
(...)
<div class="p-col" v-if="infoItem.length === 0">
</div>
<div v-else>
<router-link
:to=" {
name:
'Detail',
params: {
id: infoItem.name,
subcategory: infoItem.subcategory,
name: infoItem.name,
},
}">
<Button icon="pi pi-search-plus"></Button>
</router-link>
<router-view v-slot="{ Component }">
<transition name="route" mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
</div>
</template>
<script>
(
...)
</script>
<style>
.p-grid {
margin: 0.5rem;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
/* Route transition */
.route-enter-from {
opacity: 0;
transform: translateX(100px);
}
.route-enter-active {
transition: ass 0.3s ease-out;
}
.route-leave-to {
opacity: 0;
transform: translateX(-100px);
}
.route-leave-active {
transition: ass 0.3s ease-in;
}
</style>
Do you any idea why ?
Thanks a lot
I can't get Vue to apply Transition animation effects when changing from one CSS class to another (using V-bind).
I've gone through the Vue documentation but none of the examples work for my use case. I basically want the DIV to transition by fading nicely from full screen to "regular size" by toggling.
Please see Fiddle at https://jsfiddle.net/luckman8/892ktedz/
`
<div v-bind:class="{'fullscreen':isFullScreen, 'regularSize':!isFullScreen}">
<button type="button" #click="toggle">
Toggle
</button>
<p>
{{isFullScreen}}
</p>
</div>
`
The CSS:
.fade-enter-active, .fade-leave-active {
transition: opacity 3s ease-out;
}
.fade-enter, .fade-leave-to {
opacity: 0.1;
}
.regularSize
{
width: "50%";
height: "50%";
background-color: "green";
}
.fullscreen
{
display: flex;
flex-direction: column;
position: fixed;
background-color:blue;
top:0;
left:0;
width: 100%;
height: 100%;
flex-basis:10%;
overflow-y:hidden;
}
The Vue code:
new Vue({
el: "#app",
data: {
isFullScreen:false
},
methods: {
toggle()
{
this.isFullScreen = !this.isFullScreen
}
}
})
Thank you in advance!
The <transition> effects will only work for elements that change their visibility. So for example by using v-if.
So you have two options.
Either add a v-if logic to your template.
For example: (a quick mock up. could be refactored to be cleaner)
<div id="app">
<button type="button" #click="toggle">
Toggle
</button>
<transition name="fade">
<div
v-if="isFullScreen"
v-bind:class="{
'fullscreen':isFullScreen,
'regularSize':!isFullScreen
}">
<p>FULL SCREEN</p>
<button type="button" #click="toggle">
Toggle
</button>
</div>
</transition>
<transition name="fade">
<div
v-if="!isFullScreen"
v-bind:class="{
'fullscreen':isFullScreen,
'regularSize':!isFullScreen
}">
<p>SMALL SCREEN</p>
</div>
</transition>
</div>
Create the transition effect purely with css.
I'm trying to port some animation implemented mostly through css and little javascript to a Vue component. The animation is simple - user clicks a button and a little panel opens from the bottom of his browser and slides upwards.
I have a working Vue component implemented using the same css and no javascript.
Now, I'm aware of the transition wrapper that Vue provides. But I'm unable to figure out how to get similar functionality using the transition wrapper (if at all).
Can someone help me out here?
// register modal component
Vue.component('modal', {
template: '#modal-template',
props: ['show']
})
// start app
new Vue({
el: '#app',
data: {
showModal: false
}
})
.drawer-wrapper {
position: fixed;
top: 100%;
left: 0;
right: 0;
height: 50%;
z-index: 9998;
transition: transform .3s ease-out;
}
.drawer-wrapper.open {
transform: translateY(-100%);
}
.drawer-container {
height: 100%;
width: 100%;
background-color: white;
}
.drawer-header h3 {
margin-top: 0;
color: #42b983;
}
.drawer-body {
margin: 20px 0;
}
.drawer-default-button {
float: right;
}
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<div class="drawer-wrapper" :class="{ open: show }">
<div class="drawer-container">
<div class="drawer-header">
<slot name="header">
default header
</slot>
</div>
<div class="drawer-body">
<slot name="body">
default body
</slot>
</div>
<div class="drawer-footer">
<slot name="footer">
default footer
<button class="drawer-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</script>
<!-- app -->
<div id="app">
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal #close="showModal = false" :show="showModal">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>
</div>
I got this to work using a transition wrapper, but the code isn't as elegant as I'd expected. Particularly the use of the following attributes in the drawer-wrapper class:
top: 100%;
transform: translateY(-100%);
Fiddle is here
If anyone can simplify the code further, I'd really appreciate it.
very new to VueJS. Appreciate any help you can give me!
I'm wanting to extract some code that I've put within app.js out to my component. It appears that the vuejs syntax changes depending on what you're including? Sometimes template is within a property, and other times it has its own tag. Not quite sure what to do here.
VueJS + Laravel 5.5
app.js:
require('./bootstrap');
require('sweetalert');
window.Vue = require('vue');
import Modal from './components/Modal';
Vue.component('Modal', require('./components/Modal.vue'));
const app = new Vue({
el: '#app',
data: {
showModal: false
},
methods: {
openModal() {
this.showModal = true;
},
closeModal() {
this.showModal = false;
},
submitAndClose() {
//
}
}
});
components/Modal.vue
<template>
<transition name="modal">
<div class="modal modal-mask" style="display: block">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<slot name="header"></slot>
</div>
<div class="modal-body">
<slot name="body"></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
</style>
Is there a way to extract the methods and data out of app.js and contain it all within Modal.vue. Quite a basic question I'm sure but Vue seems to be very confusing with its syntax..
Thanks!
You can register a component by using Vue.component(tagName, options). The 2nd parameter options is an object with different properties like name, template etc
You could also use single-file components with the extension .vue in combination with a build tool like Webpack. The template will be placed with a <template> tag, styles within a <style> tag and the options object within a <script> tag. You can read more about single-file components here.