Can anybody advice how can I fix this jumping button?
I am using MaterializedCSS framework.
<h3 class="my-3">{{ name }}</h3>
<hr />
<transition name="fade"
><div v-show="isHidden">
<span>Here I am</span>
</div></transition
>
<button
#click="isHidden = !isHidden"
class="waves-effect waves-light btn my-8"
>
Click Me
</button>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>
I am using v-show directive so the element exists in DOM, its just hidden before button is clicked. As soon as button is clicked appeared texts moves button down.
You need to put the <transition> into a container with a fixed height.
For example: <div style="height: 50px"><transition name="fade">...</transition></div>
Related
I have page with background-color animated. I'm trying to navigate to another page using NuxtLink, but it doesn't render another page until css animation on the current page finishes. Is there a way for a NuxtLink to ignore animations?
Page with animation
<template>
<div class="animated">
<h1>MAIN</h1>
</div>
</template>
<script>
export default {
name: "IndexPage",
};
</script>
<style scoped>
.animated {
background-color: rgba(0, 0, 0, 1);
animation-duration: 5s;
animation-fill-mode: forwards;
animation-name: anim;
}
#keyframes anim {
from {
background-color: black;
}
to {
background-color: red;
}
}
</style>
Layout with NuxtLinks
<template>
<div>
<nav>
<NuxtLink to="/">Main</NuxtLink>
<NuxtLink to="/foo">Foo</NuxtLink>
<NuxtLink to="/bar">Bar</NuxtLink>
</nav>
<Nuxt />
</div>
</template>
Another page without animation
<template>
<h1>FOO</h1>
</template>
When I try to navigate from Main to Foo page, it transitions only after animation in main finishes. I would like it to transition to another page regardless of css.
Example: https://codesandbox.io/s/heuristic-kate-k4t77r
I got it working by wrapping the animated page inside a div. It might be colliding with nuxt transitions, I'm not sure but now it works.
<template>
<div>
<div class="animated">
<h1>MAIN</h1>
</div>
</div>
</template>
I have two divs that i transition between using transition-group, which works as it should - however, the content below the divs transitioning, is "jumping" depending on the height of the divs.
What I want it that jumping being prevented, and instead it animates somehow, so I get a nice smooth transition when switching between elements without it "pushing" down to content with a "jump"..
Hope it makes sense :)
I've setup an example on codesandbox here: https://codesandbox.io/s/reverent-stallman-8ixhp?file=/src/components/HelloWorld.vue
The template looks like:
<div class="hello">
<button #click="groupShowOne">Show first {{ gShowFirst }}</button>
<button #click="groupShowTwo">Show second {{ gShowSecond }}</button>
<transition-group name="fade-group" tag="div" mode="out-in" appear>
<div
class="group-element"
v-if="gShowFirst"
style="background-color: yellow"
>
<h3>This is a headline</h3>
<p>This is a text</p>
</div>
<div
class="group-element"
v-if="gShowSecond"
style="background-color: red"
>
<h3>
This is a headline <br />This is a headline <br />This is a headline
This is a headline This is a headline This is a headline
</h3>
<p>
This is a text This is a text This is a text This is a text This is a
text v This is a text v <br />This is a text This is a text This is a
text This is a text This is a text v This is a text v <br />This is a
text This is a text This is a text This is a text This is a text v
This is a text v
</p>
</div>
</transition-group>
<div style="background-color: blue; min-height: 500px; color: #FFF">
Prevent this div from jumping<br />
</div>
</div>
The animation looks:
<style scoped>
.group-element {
width: 100%;
min-height: 100px;
max-height: 20000px;
transition: all 0.5s;
}
.fade-group-enter,
.fade-group-leave-to {
opacity: 1;
}
.fade-group-leave-active {
opacity: 0;
position: absolute;
}
</style>
Try this
Setting the transition property in the passive div:
.ele {
background-color: blue;
min-height: 500px;
color: #fff;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
Let it do some animation
eleStyle() {
return {
transform: this.gShowSecond ? "translate3d(0, 100px, 0)" : "none",
};
},
The div:
<div class="ele" :style="eleStyle">Prevent this div from jumping<br /></div>
What you can try:
Vue has a *-move class for group transitions. However, the transition-group has to be applied to all the elements including the one that has the v-move class, to work.
Here's the article link if you need it for more details: https://vuejs.org/guide/built-ins/transition-group.html#move-transitions
(*-move basically animates items from their original position to their new position, making it smooth, rather than jumpy)
You could still work with what you have and dynamically bind a separate CSS transition for the blue box when showSecond or showFirst equate to a certain value.
I am creating a landpaging and I am facing some style difficulties due to lack of practice.
I want to modify the backgroud of the navbar, so I wanted to make the background transparent so that the bottom of the page appears. How can I do this?
enter image description here
<template>
<div class="Shellhub-LP-1280">
<div class="textura Nuvem">
<b-navbar>
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }" transparent="true">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
<!-- <img src="#/static/logo-inverted.png"> -->
</b-navbar-item>
</template>
...
</b-navbar>
</div>
</div>
</template>
<style>
.Shellhub-LP-1280 {
/* width: 100%; */
height: 2283px;
background-color: #333640;
}
.textura {
/* width: 100%; */
height: 771px;
}
.Nuvem {
width: 100%;
height: 755px;
object-fit: contain;
opacity: 0.9;
float: right;
background: url('../static/nuvem.png');
background-repeat: no-repeat;
background-position: right;
}
Thanks
buefy navbar API:
https://buefy.org/documentation/navbar/#api-view
Passing this props:
<b-navbar :fixed-top="true" :transparent="true" >
Vue docs - components props (recommend to read):
https://v2.vuejs.org/v2/guide/components-props.html
transparent "bug":
Open github issue:
BUG: navbar is-transparent not working .
IMPORTANT: transparent affect navbar items (Not the navbar wrapper himself).
Remove any hover or active background from the navbar items
So add simple CSS styling:
nav.navbar.is-fixed-top {
background: transparent;
}
body top padding issue
I won't find a way to remove body top padding. I added this style:
body{
padding-top: 0px!important;
}
Basic example:
const app = new Vue()
app.$mount('#app')
img.responsive_img{
width: 100%;
height: auto;
}
body{
padding-top: 0px!important;
}
/* change navbar background color */
nav.navbar.is-fixed-top {
background: transparent;
}
<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet"/>
<div id="app">
<b-navbar class="is-link" :fixed-top="true" :transparent="true">
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
</b-navbar-item>
</template>
<template slot="start">
<b-navbar-item href="#">
Home
</b-navbar-item>
<b-navbar-item href="#">
Documentation
</b-navbar-item>
<b-navbar-dropdown label="Info">
<b-navbar-item href="#">
About
</b-navbar-item>
<b-navbar-item href="#">
Contact
</b-navbar-item>
</b-navbar-dropdown>
</template>
<template slot="end">
<b-navbar-item tag="div">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</b-navbar-item>
</template>
</b-navbar>
<header style="min-height: 200vh;">
<img class="responsive_img" src="https://picsum.photos/2000/600"/>
</header>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
Change navbar background color on scroll
only by custom code
See this codepen (I added a class on scroll):
https://codepen.io/ezra_siton/pen/jOPZgmR
Change the background color on scroll her:
nav.navbar.is-fixed-top.isActive{
transition: background-color 0.5s ease;
background: red; /* change color on scroll */
}
Change navbar links color to white (For dark hero) - add "is-link" modifier:
https://bulma.io/documentation/components/navbar/#colors
<b-navbar class="is-link" :fixed-top="true" :transparent="true" >
Remove hover/active
:transparent="true"
Remove any hover or active background from the navbar items.
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.