I beginner for Vue, and I trying make carousel via Vue.
I have the code: https://jsfiddle.net/z3m76w5r/4/ (example)
<style>
.switch-enter-active,
.switch-leave-active {
transition: all .5s ease-in-out;
}
.switch-enter {
left: 100%;
}
.switch-leave,
.switch-leave-to {
left: -100%;
}
</style>
<div id="banner">
<transition name="switch">
<banner class="content" v-bind:slide="currentSlide"></banner>
</transition>
<div>
I want animated my carousel. But my transition-vue don't work, despite I looked at the docs and manuals.
Reason why your transition using Vue build-in <transition> component doesn't work is because its designed to work when some element/component is entering or leaving the DOM in context of:
Conditional rendering (using v-if)
Conditional display (using v-show)
Dynamic components
Component root nodes
Your image element is not entering or leaving DOM. Its just there and you are changing it's attributes (like url etc. - which cannot be animated in any way).
For your transition to work you need at least 2 img tags to exist in the DOM during the transition - one that is leaving the DOM and one that is entering the DOM. Easiest way to do this is by using v-for with key and transition-group instead of just transition. You just change the index of image, v-for will create new img element, apply "enter" transition to it and "leave" transition to old img element (for previous index)
You can find great example of that here
Related
You can see the issue I'm having here:
https://codepen.io/ryanrapini/pen/LYeWZKR?editors=1010
Essentially, I have several dialogs which I have contained into their own custom "vue components" i.e. order-dialog.vue. In an ideal world, I could simply include this <order-dialog> component wherever I need it, and it would render the activator button and then handle all of the dialog state inside the component, so the parent doesn't need to worry.
Unfortunately, if I do this in a v-card-actions section I get spacing issues. Is this a bug with Vuetify or am I doing something wrong?
I thought that by moving the activator out of the <v-dialog> tag it might fix the issue, but it still doesn't unless I break my component up into a v-dialog component and a separate activator, which means I now need to manage the state of the dialog in the parent.
Thanks for any help.
I don't think you are doing something wrong, and I'm not sure that it's a Vuetify bug.
This comes from CSS rule in Vuetify library:
.v-application--is-ltr .v-card__actions>.v-btn.v-btn+.v-btn {
margin-left: 8px;
}
I think the authors assumed that this block should contain only buttons. But in your case (in 2nd and 3rd approach) an output HTML looks like this:
<div class="v-card__actions">
<button class="v-btn ...">
...
</button>
<div class="v-dialog__container"><!----></div>
<button type="button" class="v-btn ...">
...
</button>
<button type="button" class="v-btn ...">
...
</button>
</div>
So v-dialog__container breaks this rule.
You can fix you issue, by example, with an additional rule:
.v-application--is-ltr .v-card__actions>.v-btn:not(:first-child) {
margin-left: 8px !important;
}
Or you can also apply helper classes (ml-2) into specific buttons.
I got some problems with overriding the CSS on slots inside an autocomplete.
I read this thread and tried multiple solutions, but none work that are feasible (since they globally change the style for vuetify components):
How to override vuetify styles?
How would I override the autocomplete styles? E.g right now my problem is that I'm adding an append-slot with a button inside the search field, but the padding of the text field pushes it too much to the left & no padding is applied on the bottom.
Some things I tried:
Creating a parent element with an ID and then manually trying to create a class for it.
Example:
#handlesearch > div > div > div.v-input__slot > div.v-select__slot > div {
margin-top: 4px !important;
}
<template id="handlesearch" slot="append">
<v-btn
>Sök</v-btn
>
</template>
If you inspect your html, you'll notice that adding ID on <template> is not working. If you move your id="handlesearch" to actual html element inside your slot, which is in this case v-btn.
<template slot="append">
<v-btn id="handlesearch">Sök</v-btn>
</template>
with next scoped style
<style scoped>
#handlesearch {
background: red;
}
</style>
Produces next result:
If I move id="handlesearch" to <template> as <template id="handlesearch"> style will not be applied since in my DOM there is no HTML element with that id.
Solution
Move your ID to actual element inside your slot, and add scoped style according to that.
I am having trouble animating the menu component, which is expected to slide in and out on click, while the background fades in and out. I have in and out classes, depending on a 'showMenu' Boolean. In the sandbox, the menu flies in and out instantly when I click the Vue logo, but in my local version, everything works when they slide/fade in, but nothing happens when the menu closes. I am using the Bootstrap modal for this.
https://codesandbox.io/s/nk2xnz2wp0
As another user said, vue transitions are designed for this. You're code appeared to be overly complicated, I would advise against passing a function as a property. Vue has very good documentation about communication between child and parent components, I think maybe this is where your issues were arising from. I have modified your code to include a very basic vue transition and the menu now fades in and out, see https://codesandbox.io/s/0m13wz25pl?fontsize=14.
For possible future readers, the main code involved is:
<template>
<transition name="fade">
<HelloWorld v-on:click="showMenu = !showMenu;" v-if="showMenu" />
</transition>
</tempalte>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
Inside App I made a separate div for the background and did a separate Vue transition for menu and the background div like so:
<transition name="slide-menu" mode="in-out">
<MenuDrawer v-if="showMenu" :toggleMenu="toggleMenu" />
</transition>
<transition name="fade" mode="in-out">
<div class="darkBg" v-if="showMenu"></div>
</transition>
It definitely feels dirty, and I hope someone can show me a better solution.
So I have an active Vue.js SPA. I want to animate the transitions between each 'page'. I have the router wrapped in the transition tag like so:
<transition name="example">
<router-view></router-view>
</transition>
I then apply some css like so:
.example-enter, .example-leave-to{
opacity:0;
}
.example-leave, .example-enter-to{
opacity:1;
}
.example-enter-active, .example-leave-active{
transition: opacity 500ms;
}
What this does though, is it fades in the view, but when it exists, the new view comes up from the bottom, rather than just fading out, and fading in. So what am I missing here? Is it because I wrapped the router-view in the transition tag?
Nevermind, I figured it out. on the example-leave, example-enter-to needs to be changed to opacity 0.
I have a custom element that defines a general purpose UI widget frame with various bindable default options, a template part for adding some additional 'toolbar' options and general-purpose <content /> for the body.
I then have another custom element for some administrative functionality. The latter element should present itself as a widget, and it too has various template parts.
However, if I try to embed the former widget element into the latter administrative element none of the content gets rendered.
Here's a simplified example:
eg-block (Widget) element
<template>
<div style="padding: 10px; background-color: #bbffff">
<content></content>
</div>
</template>
eg-list (Admin) element
<template>
<require from="./eg-block"></require>
<eg-block>
<div>Start of List</div>
<content></content>
<template replaceable part="list-part">Default List Part</template>
<div>End of List</div>
</eg-block>
</template>
Containing Page
<template>
<require from="./eg-list"></require>
<eg-list>
<template replace-part="list-part">Replaced List Part content</template>
<div>Replaced regular content</div>
</eg-list>
</template>
I was hoping the results of that to be:
<div style="padding: 10px; background-color: #bbffff">
<div>Start of List</div>
<div>Replaced regular content</div>
<div>Replaced List Part content</div>
<div>End of List</div>
</div>
But instead it gives me:
<div style="padding: 10px; background-color: #bbffff">
<div>Start of List</div>
<div>End of List</div>
<div>Default List Part</div>
</div>
So it doesn't render the list's content or replaced template part that is specified in the containing page. But additionally, the default content of the list's template part is actually rendered after the list.
Is this the expected behaviour? And if so, is there any way to retain the use of the widget/block element within the admin/list element but to have it render the way I was hoping?
I'm mostly copy/pasting my answer from this question here, but here goes:
Let me preface this answer by saying that content projection is changing completely (and for the better) in Aurelia RC1. We are moving to slot based content projection to match up with the newest version of the shadow DOM specs. This spec is much more powerful than the selector based setup that Aurelia has current (which is based on an earlier version of the Shadow DOM spec). This is the only breaking change we have planned between now and the full 1.0 of Aurelia.
So everything I'm telling you will be obsolete very soon.
In the meantime, the element in your custom element view needs to be at the root of the template. As to the why Aurelia is acting this way, well it's a bug:-) It has been fixed in the new implementation.
We just released a blog post regarding the new slot implementation, if you'd like to see how things will work.