When the Vue animation ends the content "jumps" back up as you can see in this example:
https://codepen.io/propsoft/pen/PRYjBZ
<transition name="slide-y-transition">
<div v-show="compare">
Here is the hidden {{ content }}
</div>
</transition name="slide-y-transition">
Any ideas on how to fix this issue?
Cheers!
The problem with the animation is that it uses transform: translateY(-15px);, which causes only a visual translation of the content but the div is still occupying the same space. One way to fix that is to animate other properties, like height for example. The drawback with that is that the div needs to have a fixed height, which may not be possible in all situations.
You can test different approaches without animating anything, see what causes the div below to actually be displaced or not. And then you can animate that.
Check out this codepen with your example animated using height: https://codepen.io/noeldemartin/pen/ommxZG
Related
I'm writing a single page web app with vue. It has 4 "page.vue"'s and in either of those goes a right and left child .vue component.
for example Page1.vue looks like this (I left style and script to keep it short)
Page1Links & Page1Rechts are the child VUEs that I try to load into the main part
(2 seperate componets were used because one needs to be changed for a more complex one soon and it's written so that the other component can stay as is)
<template>
<div>
<div class="page-wrapper">
<div class="page-container">
<div class="page-header">
<h1 id="page-h1"><span>Mauderer</span> Containertreppenkonfigurator</h1>
</div>
<div class="page-main-content">
<Page1Links id="links"/>
<Page1Rechts id="rechts"/>
</div>
<div class="page-footer">
</div>
</div>
</div>
</div>
</template>
WHAT I WANNA SEE is a header component spanning the whole page width
below that the 2 child components next to each other spanning full width
(70% left comp 30% right comp)
(wrapped in some nice design to make it clear they belong together for e.g. I tried a box shadow arround the page-main-content class, which is not showing another indicator that how I tried it won't work, or rather the main div is simply empty)
and below that the footer full width
WHAT I GET is all divs below each other at the top of the page:
1. header div
2. main div(which appears empty)
3. footer div
and below that the two child.vue, they are next to each other but that is only because I forced them too inside them.
EDIT:
Ok thanks for the info with flex you two that is helpfull in pulling the layout out of the child components.
To clarify:
My problem is that my child components are not rendered inside the main div where their tag is.
That div class="page-main-content" is empty and the Page1Links and Page1Rechts are rendered below the footer.
And I thought from the little vue experience that I have, a .vue component is rendered to where you put it's tag but that does not work here, and I don't know why.
problem example
In this pic you can see the problem:
the page parent vue and all its divs are rendered in the top(2nd grey bar is the footer) and even though I expected my approach to render the children into that main part they are actually rendered after the page 1 so basically below it.
I have bootstrapvue included I just thought it would be simpler this way, if I'm wrong please tell me
But where is your css code?
I do not know if i understand it right, but if you want to #links and #rechts next to each other you can make it by flex for example.
.page-main-content{display: flex;}
#links{flex: 0 0 70%;}
#rechts{flex: 0 0 30%;}
I tried a couple of times before it worked and it actually solved it, I don't really understand why though? The flex now pushed the children inside the page1 into the page-main-content.
I do understand that this is way more handy than what I did (code the size of the component into itself) but the components were next to each ohter before so what the flex did is force the children to render inside the parent instead of below/after it.
So thanks, problem solved.
If sbd. knows a short answer, I'm still interested into why that is though.
A div with "position: fixed" is embedded into a parent div. When the parent rotates or translates, the child div moves also.
Is it a bug? I expected the child div to remain fixed.
HTML snippet:
<div id="mask">
<div id="page">
</div>
</div>
See a repro at: http://jsfiddle.net/PseKK/
I know that I can fix it by applying the reverse transformation to the child div but for performance reasons in my real scenario, I am looking for a solution that doesn't involve extra-transformation.
Any idea how to overcome?
This is a repost, the answer is located in this original question
Positions fixed doesn't work when using -webkit-transform
Unfortunately it is a bug, but there seems to be a way to get around it.
I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.
Delete div when slide up.
Add div when slide down.
Good luck =)
For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco
I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.
I realize there's already been several questions like this, but I think my case is a little different.
I have an div that I am absolutely positioning and floating on top of the page, and I'm setting an overlay behind it to grey out the rest of the page. I have it working okay until you scroll up and down the page.
The problem is, when the div appears, it is still populating with ajax data. So the height and width of the bg overlay has already been set, but once all the data loads into the floating div, it sometimes pushing the page down so the height increases. So, I can't calculate the height and width of the window or document because the floating div might not be fully loaded yet, and once it does, it pushes the screen down further, causing the bg overlay to not cover the whole page.
So for example, in the code it's going something like:
loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());
}
I verified this by adding an alert, so that by the time I've clicked the alert, the bg overlay was able to calculate the true page size, and it looks fine.
Sorry, if this sounds confusing but hopefully you get what I'm trying to achieve. I'm assuming this isn't too difficult, but I haven't been able to figure it out.
Any help would be appreciated, I'm using jquery.
Thanks
Overlay ;)
** update, setting position of all corners to 0 instead of using width/height 100% **
$("<div/>")
.css({
position:"fixed", // ze trick
background:"#000",
opacity:.5,
top:0,
bottom: 0,
left:0,
right: 0,
zIndex: 2999 // everything you want on top, gets higher z-index
})
.appendTo("body");
Or put the above css settings in a css stylesheet (opacity needs cross browser hacks).
$("#dark-overlay").show();
Here is the solution :
JQuery Show Loading Plugin
Don't try to invent the wheel !!!
Here is a demo :
Loading Demo
Now you just need to create a main container div for your page and just ask this simple plugin to do it for you.
Maybe you want to read the plugin source and find how it works...
I'm having some minor problems with some animations I'm trying to set up. I have a couple divs stacked on top of each other kind of like this.
<div id="div1">
Stuff...
</div>
<div id="div2">
More Stuff...
</div>
Each of these divs has a drop shadow applied to it via jQuery plugin (jquery.dropshadow.js).
The problem occurs when I expand one of the divs using some kind of animation. The shadow does not update with the size of the div. I can redraw the shadow in the callback of the animation but still looks pretty joggy.
Is there a way that I can update the status of my shadows periodically throughout the course of the animation or can anyone recommend a better drop shadow library that would fix the problem? It doesn't have to be jQuery plugin.
I think the only way to do this (at least with that particular drop shadow plugin) would be targeting both the element you want and all the drop-shadow "phantom" elements, in your animation. So, for example:
<style type="text/css">
#div1 { width: 50px; }
</style>
<div id="div1">
<p>Here is a lot of stuff. Stuff stuff stuff.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#div1").dropShadow();
$("#div1").click(function() {
$("#div1, #div1 + .dropShadow .dropShadow").animate({ width: "400px" }, 1500);
});
});
</script>
This is based on the structure of the rendered code that the drop-shadow plugin produces... all the fuzzy copies of your original element get a class of .dropShadow and get grouped into a container element which also has a class of .dropShadow and gets stuck into the document right after the original element (thus the + selector).
As long as you apply whatever animation you're doing to all of these shadow elements, they all get animated (however, it is a bit jerky from all that processing... uffda).
I would suggest using CSS for your drop shadows, and not JS.
I have dealt with this exact problem in the past and I have completely stopped using JS for drop shadows. I have never seen animations with JS shadows look as smooth as pure CSS. Also, using too much JS to alter the page elements can cause performance issues.
Try to apply the same animation effects to the shadow element(s).
I don't know the exact technique used in jquery.dropshadow.js, but I suspect it creates copies of your shadow casting elements and styles them to achieve shadow like appearance. It is possible that these copies are siblings of their source elements, thus don't "follow" animation (as child elements would).
Ok, I still don't know how you animate, but I give you another example:
$('#foo').slideToggle().ready(function(){
$('#foo').dropShadow(options);
});
So, instead of slideToggle, just use whatever animation thingy you got.
Hope that helps.