I know how to to slide up and down a content box with css3 transitions and a specific height property and overflow set to 'hidden'.
But in my case I need this box to be overflow visible at the end of the slide-down-transition (it contains some absolute positioned elements that are larger than the box - to be specific a slide out menu).
Is there a way to delay the setting of the overflow-property?
I tried something like transition: overflow 0s ease 0.5s; but that obviously doesn't work.
best,
d.
The syntax you're using is absolutely right: transition:property | time | easing | delay, another property
Unfortunately, overflow isn't animatable at all (See W3C). So it's not possible to use transitions on it.
I think the only solution would be using JavaScript and the transitionend-event:
JavaScript
["transitionend","webkitTransitionEnd","mozTransitionEnd"].forEach(function(transitionEnd) {
document.querySelector("div").addEventListener(transitionEnd,function() {
if(this.style.overflow == "visible") {
this.style.overflow = "";
} else {
this.style.overflow = "visible";
}
});
});
jQuery
$("div").on("transitionend webkitTransitionEnd mozTransitionEnd",function() {
$elem = $(this);
if($elem.css("overflow") == "visible") {
$elem.css("overflow","");
} else {
$elem.css("overflow","visible");
}
});
Demo
Related
I am using Telerik Grid for Blazor WASM.
When data has changed on the server. I get notified via a SignalR connection.
I would like the affected rows to change background color and then return to the normal background color.
Could be a transition to red and fade back to the white or gray color.
I have seen many examples using hover and transitions. But this should be shown without user interaction and preferably delayed on items not in the current view. So when you scroll the grid and the items become visible, the animation starts.
Can AOS https://github.com/michalsnik/aos be used? Or will it only trigger on scroll?
The easiest way for me would be to set a class on the row in the row render event. But it’s a razor page so I can code a custom template.
Whatever can be done using :hover can be done if you add a class (then remove it after the transition). As for the appear only after scroll, you can check for the element is in view using the provided function.
function isScrolledIntoView(el) {
// from https://stackoverflow.com/a/22480938/3807365
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
// Only completely visible elements return true:
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
// Partially visible elements return true:
// isVisible = elemTop < window.innerHeight && elemBottom >= 0;
return isVisible;
}
var el = document.querySelector(".row")
window.addEventListener("scroll", function() {
if (isScrolledIntoView(el)) {
if (el.getAttribute("data-did-it")) {
return;
}
el.setAttribute("data-did-it", "true")
el.classList.add("active")
setTimeout(function() {
el.classList.remove("active")
}, 500)
}
})
.row {
transition: 500ms;
background: white;
}
.active {
background: yellow;
}
<div style="height: 400px">
scroll down
</div>
<div class="row">
this is a row
</div>
<div style="height: 400px">
scroll up
</div>
I've set up a function:
function removeDiv(el){
var elem = document.getElementById(el);
elem.style.transition = "display 2.5s linear 0s";
elem.style.display = "none";
}
and created a div which has the function called onclick.
However when I click on the div it disappears immediately without transitioning. Are display transitions not supported - can it be either one state like 'block' or another?
Thanks for looking!
display is not a property that can be animated. Try opacity instead.
For future reference, here is the official specification of all properties that can be animated: http://www.w3.org/TR/css3-transitions/#animatable-css
In my html5 game I'm playing some css3 keyframe animations.
During the animation the user can press a pause button, which sets the div-container (containing children on which the animations are played) to display:none.
After getting back to gameplay and setting the div to display:block, the keyframeanimations are forced to get replayed in Chrome and Safari.
It works fine in Firefox!
I've created a jsfiddle to show the problem http://jsfiddle.net/rrDsN/ .
in firefox the element continues to rotate, in chrome and safari it gets replayed.
I tried to use visibility:hidden, opacity:0 instead, but then I have problems with clickable elements (due to opacity) and visibility isn't recursive in the div-element.
How can i prevent the animation to get replayed in a webkit browser or what would be an alternative to display?
Solution
It's a combination of zIndex and Opacity:
old code:
if(visible) {
this.domEl.style.display='block';
} else {
this.domEl.style.display='none';
}
new code:
if(visible) {
this.domEl.style.zIndex=(this.prevZIndex==undefined?0:this.prevZIndex);
this.domEl.style.opacity=1;
console.log(this.name+" "+this.domEl.style.zIndex);
} else {
this.prevZIndex=this.domEl.style.zIndex;
this.domEl.style.opacity=0;
this.domEl.style.zIndex=-10;
}
}
Hide by position: absolute with not visible coords (fiddle):
document.getElementById('rotate').onmouseover = function(){
this.style.cssText = 'position: absolute; top: -9999px;left: -9999px;';
};
document.getElementById('rotate').onmouseout = function(){
this.removeAttribute('style');
};
Please check the following fiddle: http://jsfiddle.net/tWUVe/
When you click the div, the p's get deleted, and I expect that the div's height will be animted, but no animation happens. How can I achieve an animation with CSS3 only?
The issue is that there is no opportunity for the transition to occur. What I mean by this is that when elements are removed, they are immediately taken out of the document flow, resizing the parent if needed without a transition.
As a fix for this, you could animate the height of the paragraphs instead (or a similar means)
$('div').click(function() {
var $thisDiv = $(this);
$thisDiv.find('p').css({'height':'0px','margin':'0px'}); // Change p height
// Remove after transition
setTimeout(function() { $thisDiv.find('p').remove(); }, 1000);
});
Demo
I want to add this transition effect to my website: http://www.formuswithlove.se/ (when you arrive to the next anchor the background-color change)
How can I do this?
Thanks in advance
I don't think that this can be done via pure CSS, but you can just check the scroll amount on a window.scroll event and update the background color for the body (or container element). You may also like to have a transition.
window.addEventListener('scroll', function () {
if (document.body.scrollTop > 500) {
document.body.style.backgroundColor = "red"
}
else {
document.body.style.backgroundColor = "transparent"
}
});
http://jsfiddle.net/GnX8A/1/