I’m having an issue with my script that loads content to a page via jQuery .load(). The content loads properly, my animation of said content works (done with class "hidden"), but I’m setting the height of the wrapping container before loading, and then animating the height of said container to keep the page from jumping between the different content heights.
Essentially what’s happening, is the height is getting set to 0 for some reason, rather than the actual height of the element. Strangely, this seems to work on the initial click, but then on any others it breaks and sets the height to 0.
See the code below (I would create a jsFiddle but, .load() doesn't work with that):
HTML
<main id="content" class="content">
<div id="content-inner" class="content-inner">
<!-- Content -->
</div>
</main>
CSS
.content {
transition: .25s height;
}
.content-inner {
position: relative;
top: 0;
opacity: 1;
visibility: visible;
transition: .25s opacity, .25s top;
}
.hidden .content-inner {
top: -30px;
opacity: 0;
visibility: hidden;
transition: .25s opacity, .25s top, 0s visibility .25s;
}
JavaScript (jQuery)
var $mainContentOuter = $('#content'),
linkContent = '#content-inner',
$mainContentInner = $(linkContent);
function loadMainContent(link) {
// Assign height as current height to prevent jumping
$mainContentOuter.height( $mainContentInner.outerHeight() );
// Hide content
$mainContentOuter.addClass('hidden').delay(250).queue(function() {
// Load content
$mainContentOuter.load(link + ' ' + linkContent, function() {
// Animate the height difference when loaded
$mainContentOuter.height($mainContentInner.outerHeight());
});
// Dequeue for delay
$(this).dequeue();
}).delay(250).queue(function() {
// Reveal content and reset height
$mainContentOuter.removeClass('hidden').css('height','');
// Dequeue for delay
$(this).dequeue();
});
}
// Override behavior of navigational links
$('.nav-main > li > a').click(function(e){
var link = $(this).attr('href');
//Pass link
loadMainContent(link);
e.preventDefault();
});
Any help would be greatly appreciated.
Thanks in advance,
Rob
The problem is that you load the inner-content inside the outer content, so there is no inner-content after the load takes place. Try using:
$mainContentOuter.load(link + ' ' + '#content', function() {
// Animate the height difference when loaded
$mainContentOuter.height($mainContentInner.outerHeight());
});
Imagine it like you have 2 rectangles A and B, where B is inside A. If you load everything that B has and give it to A then there will be no B, but only A because B didn't have B in it, so A won't have B in it either. I recently encoutered a similar problem and it took me hours to understand and solve it. Please let me know if this solved your problem!
Thanks to #thanasis I realized what was going on here.
The variable $mainContentInner was storing a reference to the original object in the DOM. Once the page content was loaded, this object was removed and replaced with another one, albeit similar.
Even though they have the same ID, they're different objects. To get around this, I redefined the variable, so as to target the new object. See below:
// Load content
$mainContentOuter.load(link + ' ' + linkContent, function() {
// Redefine $mainContentInner to the new object
$mainContentInner = $(linkContent);
// Animate the height difference when loaded
$mainContentOuter.height($mainContentInner.outerHeight());
});
Related
I want to create a smooth transition between 2 images with a legend. The images come from an object-array of images.
Because works only on single tags and components, I've created a component to define the image+legend.
<transition>
<home-image :slide="slide" :key="slide"></home-image>
</transition>
The classes I define are like this
.v-enter-active,
.v-leave-active {
transition: opacity 2s ease-in-out;
}
.v-leave,
.v-enter-to {
opacity: 1;
}
.v-enter,
.v-leave-to {
opacity: 0;
}
The new image is returned by a method
updateSlide() {
this.slide = this.entries[ Math.floor( Math.random() * this.entries.length ) ];
}
where entries is my array defined in data
this.slide is updated in regular intervals, every 10seconds like this, which is defined in the created() section
this.updateSlide();
this.uSlide = setInterval( this.updateSlide, 10000);
The code works, in the sense that a new image is loaded in this.slide every 10 seconds. However, the transitions work only "half-way".
There is no transition fading out: the "old image" disappears and makes way for the new image fading in.
However, what I'd like is a smooth transition from one to the other.
I've tried more than a couple of ideas including using mode="out-in" and "in-out" but nothing works as I want.
What am I overlooking?
Found out position in v-enter and v-leave had to be set.
Code is now:
.v-leave,
.v-enter-to {
position: relative;
opacity: 1;
}
.v-enter,
.v-leave-to {
position: absolute;
opacity: 0;
}
I've created new div using JavaScript and set its width and height. Immediately after that I need to resize it to 100% width with transition effect. But it manifests only when the styles editing is inside of Timeout function. Without that it just jump to new width.
Css:
#project-detail {
#extend .project-detail-preview;
transition: width 0.25s ease-out, top 0.25s ease-out, left 0.25s ease-out, height 0.25s ease-out;
}
Script:
var detailContainer = document.createElement("div");
detailContainer.id = "project-detail";
detailContainer.innerHTML = previewContent.innerHTML;
detailContainer.style.width = previewWidth;
detailContainer.style.height = previewHeight;
blocksContainer.appendChild(detailContainer);
for (let project of source.projects) {
if(project.id == projectID) {
setTimeout(function () {
detailContainer.style.width = "100%";
}, 1);
}
}
JS is single threaded if you change width to 20 and then to 100, the change to 20 is like if didn't happen. so you need to use a setTimeout() so it first changes it to 20, and "later" it changes to 100
I believe this is because you append the div to the DOM, and immediately (next line of code), you resize it to 100% width.
The problem is that in the page's life cycle, the CSS doesn't have time to catch up and apply between these two lines of code. So, the transition duration is not yet applied, and you already resize the div, so it jumps immediately to 100%.
On the other hand, when you set a Timeout, being asynchronous, the function inside the Timeout is executed at the end of the execution stack, that is, after applying the CSS rules to the newly created elements. You can even set a 0 delay or no delay at all, it will work all the same.
I tried to do things like this with JS, even read bunch of articles about requestAnimationFrame and understood, that things like that better to do with CSS classes. Try to toggle class on action:
for (let project of source.projects) {
if(project.id == projectID) {
detailContainer.className += ' fullwidth-class';
}
}
And add same CSS class:
.fullwidth-class {
width: 100%!important;
}
#project-detail {
animation-duration: 1s;
}
How to read dimensions and move a div that is hidden before Vue transition starts? For example, a user clicks a button and I want to move a hidden div to appear under the button with a fade-in transition. I need to be able to both read the dimensions and move the top/left position of the hidden div before the transition starts.
Let's say I'm using v-show="active" on the div, where active is my reactive data property I want to set to true and be able to move the div before transition starts.
I've tried all these:
Move the div first, then on nextTick set active = true.
Use the javascript hook beforeEnter to try to move the div before transitions start.
Use the javascript hook enter (and 'done' callback) to try to move the div before transition starts.
Tried all the above with updating the DOM immediately with the new position before setting active = true. (In other words, not via data binding, but actually setting element style properties directly like this.$refs.content.style.top = '500px' to avoid any waiting on the virtual DOM.) However, ideally I would like to accomplish this without directly touching the DOM, but using nextTicks instead. Both approaches fail.
Tried with some success with a hacky transition: all .8ms ease-in, top 1ms, left 1ms.
Tried with success with moving the div first then setting active in a setTimeout. This is not the right solution though.
Update
Thanks to the accepted answer I was able to see that I can read dimensions on nextTick (by which time v-show has turned on display). However, it turns out I needed the transition to be all transition all .3s and that would cause the movement to be included. The DOM will gather up all the changes and apply them together, which means they get lumped into the transition that is later added by Vue. The solution ended up being that I needed to make the movements, then trigger the DOM to repaint first, then trigger the v-show to turn on. Here's an example method:
startTransition () {
this.$refs.content.offsetHeight // <-- Force DOM to repaint first.
this.isContentActive = true // <-- Turns on v-show.
},
Use v-bind:style to move your window and it all works as intended.
Update: To check the size of the popup itself, it has to be shown, so I'm using v-show instead of v-if. The first thing I do is make it visible; on the next tick, I can measure it and place it.
new Vue({
el: '.container',
data: {
top: 0,
left: 0,
width: 0,
show: false
},
methods: {
showFloater: function(evt) {
const t = evt.target;
this.show = true;
Vue.nextTick(() => {
const fEl = this.$el.querySelector('.floating');
this.top = t.offsetTop + 30;
this.left = t.offsetLeft;
this.width = fEl.offsetWidth;
setTimeout(() => this.show = false, 1000);
});
}
}
});
.container {
position: relative;
}
.floating {
border: thin solid black;
padding: 3em;
position: absolute;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div class="container">
<button #click="showFloater">Could go here</button>
<button #click="showFloater">Or here</button>
<transition name="fade">
<div v-show="show" class="floating" v-bind:style="{
top: top + 'px',
left: left + 'px'
}">
This window is {{width}}px wide.
</div>
</transition>
</div>
Wanted to get insight and help advancing a plugin I am beginning to build!
Looking to build the same effect that AKQA.com has, were on page load certain elements transition into place (using translateY of course). However if the elements are in view within the browser window. As you scroll down, other elements have the same effect transitioning up into place and appearing from opacity 0 to 1.
What I am trying to accomplish is getting select elements to transition from opacity 0 to 1 effect translating upwards via scrollonly however when the element is not in-view. If however the elements are already in view (due to page loading right where the elements are) the effect will happen automatically until you scroll down to reveal more elements.
Currently in my JS code I am grabbing the data selector on the elements and applying to each of the elements a transition-delay and a CSS class which suppose to be the class that creates the effect. I have three variables docHeight, offSetter and scrolling that are suppose to help me create the logic behind the scrolling effect but I simply can not wrap my head around creating the effect.
Here is a live demo in my fiddle http://jsfiddle.net/coder101/hYS48/1/
The Hi link is simply for testing to toggle the in-view CSS class I have
Thank you for the help!
Javascript
var loop = function ScrollTransition( ) {
var core = function() {
var i = 100,
dataTheme = $('[data-show*="on-scroll"]').not('in-view'),
docHeight = $( document ).height(),
offSetter = parseInt(dataTheme.offset().top, 10),
scrolling = dataTheme.scrollTop();
// console.log(h);
dataTheme.each(function() {
_this = $( this ),
_this.css("transition-delay", i + "ms", i += 100);
});
},
initializer = function() {
if ( el.hasClass('js') && el.hasClass('no-touch') && el.hasClass('csstransitions') ) {
core();
}
};
return {
init:initializer()
}
};
loop();
// For testing
var divElements = $('article');
var doc = $( '#hit' );
doc.on("click", function() {
if( el.hasClass('js') && el.hasClass('no-touch') && el.hasClass('csstransitions') ) {
divElements.toggleClass('in-view');
}
});
CSS
.base {
width: 300px;
height:300px;
background:blue;
float:left;
}
article {
margin-right:45px;
margin-bottom: 40px;
}
/* starting phase */
.js.no-touch.csstransitions [data-show="on-scroll"] {
opacity:0;
-webkit-transform:translate(0,90px);
-ms-transform:translate(0,90px);
transform:translate(0,90px);
-webkit-transition:opacity .6s .1s, -webkit-transform .6s ease;
transition:opacity .6s .1s, transform .6s ease
}
/* finishing phase */
.js.no-touch.csstransitions .in-view {
opacity:1;
-webkit-transform:translate(0,0);
-ms-transform:translate(0,0);
transform:translate(0,0)
}
My code is showing pages by emptying an HTML tag and replacing the content.
The height of the parent div changes when different content is loaded, but I can't get the height change to transition smoothly. This probably has to do with the image still being loaded. What would be a good way to transition between these two states?
// first fade out
$(".page").animate({opacity:0}, 600, function() {
// then replace html
$(".page").html("new html here including an <img src='image.jpg'><br>and more text.");
// now calculate new height and then fade in again
var endHeight = $(".page").height();
$(".page").animate({opacity:1, height:endHeight});
});
Suppose you have a div element that acts as a container for you content. If you are loading content that may take some noticeable time to load (such as an image), you can wait for that new element to load, and then manually re-set the height of the container. Doing this, in conjunction with CSS3 transitions, will prevent the container from animating before the content can actually be displayed.
From the fiddle:
$(document).ready(function() {
var container = $('.container');
/* ... */
function replaceContent(container) {
var content = new Image();
content.onload = function(e) {
container.empty().append(content);
container.css({'height': content.height});
};
content.src = getRandomImageUrl();
};
setInterval(function() { replaceContent(container); }, 5000);
});
Working example on jsFiddle: http://jsfiddle.net/7Vn5a/1/
Did you try css transitions?
.YOUR_DIV{
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}