I'm trying to implement the basic GSAP fade-in / fade-out demo from the barber.js site.
The markup of test page one is as follows:
<body style="background-color: red; color: white;" data-barba="wrapper" data-barba="page1">
<h3>Constant</h3>
<main data-barba="container" data-barba-namespace="home">
<h1>Page 1</h1>
go to page 2
</main>
The markup of test page 2 is as follows:
<body style="background-color: white; color: red;" data-barba="page2">
<h3>Constant</h3>
<main data-barba="container" data-barba-namespace="home">
<h1>Page 2</h1>
go to page 1
</main>
With the following JS at each the bottom of each page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#barba/core"></script>
<script>
barba.init({
//sync: true,
transitions: [{
name: 'opacity-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
</script>
When leaving the current page the old element fades out OK, however the new element appears underneath a fraction early meaning I have two elements the new one jumping up as the old finishes disappearing?
Is there a way for the new one only to start appearing after the old one has finished?
I agree, the basic example is kinda failed. It turns out it depends on the styles a bit.
I managed to make it work adding display: 'none' to the leave transition, that forces the previous container to disappear before the next starts displaying:
// ...
leave(data) {
return gsap.to(data.current.container, {
opacity: 0,
display: 'none',
});
}
// ...
My best guess: the transition is meant to allow container overlapping. So you could get away with css (position: relative or something like that).
Related
I have a page transition for VUE js that I have implemented. I did this manually because I could not find how to do this using VUES transition.
(I am using gridsome framework for vue js - I have added a custom App.vue page - which should allow transitions of gridsome to act like normal Vue js transitions)
I feel like what I have done is bloated for its use case so wanted to see if anyone knew how to implement this using vue transtions.
#1
Users click component (which has a #click - triggering a this.$router.push() to the route)
#2
A div pops over the screen in the color of that component, creating a nice fade to hide the transition
#3
On the new page, another div identical to the transition one, now exits the screen.
I have this working here for reference, just click on clients (please try not to judge me to much, its still in development) -
https://wtwd.ninjashotgunbear.com/
MY METHOD:
Index.html
Each component is a SectionTitle when the user clicks on one of them they $emit the specific obj with the data for that page (such as the color && the name of the page to be routed to) - this is the #routeChange="reRoute($event) seen below:
<template>
<Layout>
<div class="navs" v-for="section in sections" :key="section.sectionTitle">
<!-- On click delay for screen to come ove top -->
<!-- router to be put here -->
<SectionTitle :data="section" #routeChange="reRoute($event)"/> <<<< COMPONENT that $emits on click
</div>
<!-- fullpage div to slide in and cover up no leave transition -->
<div class="leaveScreen"></div> <<<<< DIV that covers the screen
</Layout>
</template>
This triggers my method that moves the div over the UI view and creates the transition effect:
methods:{
reRoute(value){
console.log(value)
// 1) animate the loading screen
let screen = document.querySelector('.leaveScreen');
screen.style.cssText=`background: ${value.backgroundColor}; left: 0%`;
// 2) re-route the page
setTimeout(()=>{
this.$router.push(value.sectionLink)
}, 700)
}
}
CSS FOR DIV :
.leaveScreen {
position: absolute;
top: 0;
bottom: 0;
left: -100%;
width: 100%;
z-index: 11;
// background color added by the fn reRoute()
transition: all 0.7s;
}
The on the page, I use the mounted hook to remove the div from the users view (in the same, but other way around, way that I added it above.
mounted(){
let screen = document.querySelector('.fadeOutScreen');
// set timeout works to delay
setTimeout(()=>{
screen.style.cssText='left: 100%;'
},700)
}
If you know how to do this in a cleaner code / or by using VUES transition property then your help is very welcomed. I figured that VUE would have a specific way of doing this, but have not found it yet.
Thanks in advance -
W
If you wrap .leave-screen in a transition element you can do something like this:
new Vue({
el: "#app",
data: {
leaveScreen: false
}
})
body {
margin: 0;
}
.click-me {
cursor: pointer;
font-size: 30px;
}
.leave-screen {
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
background-color: rgb(0, 0, 0);
}
.leave-screen-enter-active,
.leave-screen-leave-active {
background-color: rgba(0, 0, 0, 1);
transform: translateX(0);
transition: all 1s ease-in-out;
}
.leave-screen-leave-to,
.leave-screen-enter {
background-color: rgba(0, 0, 0, 0);
transform: translateX(-100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div #click="leaveScreen = true" class="click-me">
Click Me
</div>
<transition name="leave-screen">
<div v-if="leaveScreen" class="leave-screen" #click="leaveScreen = false"></div>
</transition>
</div>
.leave-screen-enter-active and .leave-screen-leave-active define the state of the element during transition.
.leave-screen-leave-to is the state the element leaves to (surprisingly) and .leave-screen-enter is the state of the element before it enters.
The styles you set on the element itself are where the transition starts/ends (depending on whether it's entering/leaving).
Vue's definitions:
v-enter: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
v-enter-active: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
v-leave-active: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
v-leave-to: Only available in versions 2.1.8+. Ending state for leave. Added one frame after a leaving transition is triggered (at the same time v-leave is removed), removed when the transition/animation finishes.
I have a button on a summary page that #click will print a completed from that is not being rendered on that specific instance.
what is the best practice to print a component without having to render it on the active page?
I tried rendering the component on the page with visibility: hidden; so that the component renders then I can click the button to window.print()but this seems like a hack and not the best practice plus it adds a huge empty space to my instance.
I need a way to print the form (component) without actually rendering it on the page.
How do I solve the problem?
Take a look at #media features (#media print in your case). Just create a CSS class that will always apply display: none;, except when a browser in print mode.
Vue.component('my-component', { template: '<h1 class="print">Hello World</h1>' }, )
new Vue({
el: "#app"
})
.print {
display: none;
}
#media print {
.print {
display: initial;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<my-component></my-component>
</div>
I'm using the amazing transition to slide router pages in vue.js
<template>
<div>
<header-comp></header-comp>
<transition
name="custom-classes-transition"
mode="out-in"
enter-active-class="animated slideInLeft"
leave-active-class="animated slideOutRight"
>
<router-view></router-view>
</transition>
<footer-comp></footer-comp>
</div>
</template>
<style>
#import 'https://cdn.jsdelivr.net/npm/animate.css#3.5.1';
</style>
It works very nice and smooth, but... the new coming page enter when the first one is totally gone. This made a gap between transition.
In Vue manual: Transition-Modes there are a few examples. I need to replicate the third button example but I'm missing the mode I have to use.
Any suggestion?
The main problem with your transitioning elements is that you want them to occupy the same space in DOM at the same time (even if, visually, one enters and one exists - that's only done through transforms but the two elements need to occupy the same space in DOM).
Therefore you need to give one of them position:absolute and use CSS to size and position it correctly, to match the exact position and size it would have when not having position:absolute (which is what it will have when not trasitioning).
Here's a working example. Note yours might need different styles applied to a different element.
Since you haven't provided a minimal, reproducible example with your own markup, there's no way to know.
In the example above, I gave the subsequent <div> (the entering one)
position: absolute;
width: 100%;
top: 60px;
left: 0;
If you choose to wrap all your <router-view>s into a common wrapper element with position:relative, top would need to be 0 (in the example 60px is accounting for <nav>'s height).
Note: and yes, as others already pointed, you don't need mode="in-out". But that still leaves you with the positioning issue.
Edit: I've played with two more examples.
one using a flexbox container of height:100vh where top and bottom elements don't grow and middle one does. When middle element is too big, it becomes scrollable.
another one where I played with the transition effects and Bootstrap Vue.
Actually since you don't need any special behaviour and actually want both transitions to happen at the same time, you shouldn't be using the mode at all. Just remove it and it should work as you described. From the docs link you pasted:
Simultaneous entering and leaving transitions aren’t always desirable though, so Vue offers some alternative transition modes
in-out: New element transitions in first, then when complete, the current element transitions out.
out-in: Current element transitions out first, then when complete, the new element transitions in.
mode="in-out": New element transitions in first, then when complete, the current element transitions out.
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
showOn: true
},
methods: {
handleClick() {
console.log(this.message);
}
}
})
.slide-fade-enter-active {
transition: all .3s ease;
position: absolute;
left: 0;
top: 0;
}
.slide-fade-leave-active {
position: absolute;
left: 0;
top: 0;
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
#app {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
<div id="app">
<transition name="slide-fade" mode="in-out">
<button v-if="showOn"
key="on"
type="button"
#click="showOn=false">On</button>
<button v-else type="button"
key="off"
#click="showOn=true">Off</button>
</transition>
</div>
</body>
I am trying MapBox with Vue 2 and I cannot make the map take the full width of the container. It only renders on 50% of the width of the container.
I have included the files in the head of my index.html as follows:
<script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />
I want the map in a component (Map.vue, I am using vue-router), so here is the code in Map.vue:
Script:
import Mapbox from 'mapbox-gl-vue';
export default {
components: {
'mapbox': Mapbox
}
}
Template:
<mapbox access-token="pk.eyJ1Ijoic3BlZW5pY3Q....."
:map-options="{
style: 'mapbox://styles/mapbox/streets-v9',
center: [-96, 37.8],
zoom: 3
}"
:geolocate-control="{
show: true,
position: 'top-left'
}"
:scale-control="{
show: true,
position: 'top-left'
}"
:fullscreen-control="{
show: true,
position: 'top-left'
}">>
</mapbox>
Style:
#map {
width: 100%;
height: 600px;
position: absolute;
margin:0;
z-index:1;
}
I have tried everything I know in the CSS id but it only renders the map in the right half of the width of the container, in the left one only the logo and the controls are displayed while the rest of the area is empty.
To solve the problem, I just had to delete "text-align: center;" from #app in App.vue.
For more details, check the issue I had opened here:
https://github.com/phegman/vue-mapbox-gl/issues/11
It looks like to me, there is something dynamic with the div or the div is rendered later after the instantiation. I have not used vue, however.
I have had this problem with tabs and div rendered after the page load such as in tabs or triggered by JavaScript.
If you use map.invalidateSize(); where map is the object instantiated. This will redraw the map. Try and put this after the window is loaded to test the code. Then perhaps it can be converted into the correct Vue implementation.
window.addEventListener("load", function(){
map.invalidateSize();
});;
what I am trying to do is on open, menu 1, showing 'Click me to start'. Menu 2, which currently says 'This is menu 2', just for building purposes, is hidden. Then, on first click, menu 1 hides and menu 2 shows, then toggles back on second click. The problem is that once menu 2 is showing and menu 1 is hidden, it won't toggle back.
<div id="nav" class="nav">
<div id="whiteboardtext1" class="whiteboardtext1"><p>Click here to start</p></div>
<div id="whiteboardtext2" class="whiteboardtext2"><p>this is menu number 2</p></div>
</div>
.nav{
width:700px;
float:left;
}
.whiteboardtext1{
position:absolute;
margin-top:110px;
margin-left:215px;
width:300px;
height:100px;
font-size:30px;
font-family:whiteboard;
text-align:center;
border:1px solid #fff;
cursor:pointer;
}
.whiteboardtext2{
z-index:1;
position:absolute;
margin-top:50px;
margin-left:50px;
width:650px;
height:350px;
font-size:30px;
cursor:pointer;
font-size:30px;
font-family:whiteboard;
text-align:center;
border:1px solid #fff;
cursor:pointer;
}
$(document).ready(function(){
$('#whiteboardtext2').hide();
$('#whiteboardtext1').toggle(
function() {
$('#whiteboardtext1').stop().animate({
'opasity':'0'
}, 'fast');
$('#whiteboardtext2').stop().animate({
'opasity':'1'
}, 'fast');
$('#whiteboardtext1').fadeOut();
$('#whiteboardtext2').fadeIn();
},
function() {
$('#whiteboardtext1').stop().animate({
'opasity':'1'
}, 'fast');
$('#whiteboardtext2').stop().animate({
'opasity':'0'
}, 'fast');
$('#whiteboardtext2').fadeOut();
$('#whiteboardtext1').fadeIn();
})
});
I pretty sure the code is correct, but I just can't get it to work.
If anyone can help, I would really appreciate it.
Thank in advance
me
If I understand you correctly - http://jsfiddle.net/M8Tgx/
I changed CSS rules for .whiteboardtext2 just added display:none; by default.
I rewrite your JavaScript to this:
$(document).ready(function(){
$('#whiteboardtext1').click(function(){
$('#whiteboardtext1').fadeOut();
$('#whiteboardtext2').fadeIn();
});
$('#whiteboardtext2').click(function(){
$('#whiteboardtext1').fadeIn();
$('#whiteboardtext2').fadeOut();
});
});
You code is not correct, because you are applying toggle #whiteboardtext1 element, but when it first call, it hide and the #whiteboardtext2 get displayed, and you dint apply any event on that, so it is not working as you are expecting. and opacity is correct css property.
You can try this to work
$(document).ready(function(){
$('#whiteboardtext2').hide();
$('#whiteboardtext1').show();
$('.nav').on('click', 'div', function() {
var _this =$(this);
_this.stop().animate({
'opacity':'0'
}, 'fast', function(){_this.hide();})
_this.siblings().stop().animate({
'opacity':'1'
}, 'fast').show();
});
});
This is because the toggle handler is bound to the #whiteboardtext1 element. Whenever #whiteboardtext1 is clicked, one text will fade out and the other will fade in, but #whiteboardtext2 has no click handler, so clicking it has no effect.
Also, opasity is not a valid CSS attribute, so animating it has no effect except to delay the subsequent animations. Assuming you wanted to fade the texts in/out, not a delayed sudden change.
Use this:
var $text1=$('#whiteboardtext1');
var $text2=$('#whiteboardtext2');
$text1.click(function(){
$text1.stop().fadeOut("fast");
$text2.stop().fadeIn("fast");
}
$text2.click(function(){
$text2.stop().fadeOut("fast");
$text1.stop().fadeIn("fast");
}