https://codepen.io/fuzzalicious/pen/YzYwozv
.faq-content {
transition: max-height 2s ease-in-out;
overflow: hidden;
}
.dropdown-off {
max-height: 0;
}
.dropdown-on {
max-height: 1000px;
}
I have an animated dropdown that uses max-height, but I can only get it to work with static height, I would like it work with any content so you don't have to know the height in advance.
Now I'm setting max-height to 1000px which means longer lists would be cut off and short ones take long to animate. Is there any way to use something like max-height: auto or calculate the content height?
Related
My need is to calculate an image height value dynamically at the hover effect when using transform: translateY( ). As I did at hove I use transform: translateY( -80% ) this -80% value needs to come dynamically from images height according to those individual images & of course, these images heights are different from each other, (in short, all images heights are not the same).
So instead of using this static -80% hard-coded value, want to use variable images height at hover effect to respect those individual images height.
.image {
height : 30rem;
width : 40rem;
overflow : hidden;
}
.image:hover img {
transform : translateY(-80%);
/* this -80% value should be dynamic, base on img height value */
}
img {
width : 100%;
transition: 5s ease;
}
I am using Angular to hide/show items of a unordered list. Since the effect is a bit too fast for the user to notice the disappearance/appearance of my lis, I want to add a transition on the height.
li {
transition: height 1s linear;
overflow: hidden;
}
li.ng-hide {
height: 0;
}
This is where my problem is : the transition does not affect the lis, unless I set them a height, which I don't want, since I don't exactly know how big they are.
Here is a plunker to illustrate that. I've made the test on lis and divs and I've also tried without Angular which does not seem to be the responsible.
How can I make the transition work without setting the height of my elements ?
Just do it by animate max-height instead of height like in this DEMO PLNKR. In that way you are able to have a dynamic height of your element between 0 and your max-height property. There is no need for jQuery. You should avoid using jQuery or direct DOM-Injections in AngularJS applications.
li,
div {
transition: all 1s linear;
-webkit-transition: all 1s linear;
border: 1px solid;
overflow: hidden;
}
.work {
border-color: green;
max-height: 500px;
}
.no-work {
border-color: red;
max-height: 500px;
}
li.ng-hide,
div.ng-hide {
max-height: 0;
}
I have come across the same problem myself in the past and discovered as you have that the height must be set, this is in order for the transition to calculate what needs to happen. Two ways I have managed to get round the problem:
CSS way:
li {
transition: max-height 1s linear;
overflow: hidden;
max-height: 500px; // Any value above what you expect to be the biggest
}
li.ng-hide {
max-height: 0;
}
The above method has a two drawbacks in that, one you'll need to know an upper limit and two there will be a slight jump in animation. A better way might be to calculate the height with javascript:
** UPDATE FROM JQUERY **
var listItems = document.getElementsByTagName("li")
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.height = listItems[i].clientHeight + 'px';
}
Then you'd need the css:
li.ng-hide {
height: 0 !important;
}
To override the style attribute. Here is a pen of this example with a little bit extra in to illustrate the solution.
You don't necessarily need to set your transition on height.
You can set it on the ng-hide or ng-show property.
Here is your example with this feature :
https://plnkr.co/edit/pD4sQNGqpqrINJlZwE3q?p=preview
Simply assign the class to the element you want to animate.
.animate.ng-hide-add,
.animate.ng-hide-remove {
transition: all linear 2s;
}
You'll find more infos here : https://docs.angularjs.org/api/ng/directive/ngShow
nb: You can seperate the animation for ng-hide-add and ng-hide-remove in your css. of course.
Hope it helps !
I'd like to make the height of a div animate depending on the dynamic ad that is served inside.
<div>
// Dynamic Content
</div>
The div has a minimum height of 90px, however if the ad served into the div has a height of 300px, I want the div to animate (css3 transition preferably) to the new height of 300px.
Is this possible?
At the moment the div just jumps to the new height, and the main content of the page jumps down with it. I'd just like this to be a smooth transition.
You should use max-height instead of min-height. Use max-height value t something your height will never reach, or if you want to strict hieght to some value.
And use transition with max-height and ease-in.
See JSFiddle provided in another answer by Chris Jordan.
<div class="imagediv">
// Dynamic Content
</div>
//CSS
#imageDiv {
max-height: 500px;
transition: max-height 0.25s ease-in;
}
If you can catch the "ad loaded" event and add a class to your div accordingly you can try setting the max-height of the div instead of height.
function addElement() {
var initialDiv = document.getElementsByClassName('yourDiv')[0];
var newdiv = document.createElement('div');
newdiv.setAttribute('style','height: 300px;');
initialDiv.classList.add('loaded');
newdiv.innerHTML = '<img src="http://placehold.it/300x300"/>';
initialDiv.appendChild(newdiv);
}
setTimeout(function(){
addElement();
}, 1000);
.yourDiv {
min-height: 90px;
width: 300px;
background-color: grey;
max-height: 90px;
transition: max-height 500ms ease-in;
overflow: hidden;
}
.yourDiv.loaded {
max-height: 300px;
transition: max-height 500ms ease-in;
}
<div class="yourDiv">
</div>
You can set the max-height to 300px or more, it doesn't really matter.
EDIT:
Based on your comment. There actually is an event you can listen to in GPT. You can simply add it when pushing the ads like this:
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
// slot has been rendered - do stuff
});
Now I'm not sure how you've done yours but I think you can implement this easily to your existing code.
A working example: https://jsfiddle.net/thepio/7tfdxw8f/
You try:
div{
height:auto
}
Create a new div dynamically with default display:none property. Append the ad to this new div and then append the new div to your original div. And you can show the new div with effect. Have a look below
$('button').click(function(){
$('.content').append('<div id="new" style="display:none;">1<br>1<br>3<br>4<br>1<br>3<br>4<br>1<br>3<br>4</div>');
$('#new').show(1000);
});
.content{
min-height:90px;
border:1px solid #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"></div>
<button type="button">Click</button>
I am trying to develop a small module (like the collapse component of twitter bootstrap).
I don't know how to treat the content of the div which is growing up/down, it could take me many descriptions, nothing's better than an example: Collapse deployment.
You can see a div.container which is the block destined to grow up/down.
Here i declare height: 50px to illustrate a state of the deployment.
Is there a way to hide the content (here a part of the text) that is out of the height of a parent div ?
I like the idea that we can access a content only by deploying another one, but i don't really don't understand how to make it happen properly in CSS.
Like this? JSFiddle example: http://jsfiddle.net/SW86B/1/
Updated CSS
.header {
background-color: green;
height:20%;
}
.container {
background-color: red;
height: 0;
overflow: hidden;
-webkit-transition: height 0.2s ease;
-moz-transition: height 0.2s ease;
transition: height 0.2s ease;
}
.container.open { height: 50px;}
p { margin: 0; }
Use jQuery to toggle states
$('button').on('click', function(event){
$('.container').toggleClass('open');
});
I am not sure that i understand what you are trying but you can use
overflow:hidden;
Demo here - http://jsfiddle.net/JjPcy/1/
Set the div.container's overflow css properoty to hidden.
div.container { overflow: hidden; }
Also make a class for instance called auto-width that has auto width:
div.auto-width { width: auto !important; }
Then use jQuery to toggle the class and reveal the data inside the container:
$('div.header button').click(function() {
$('div.container').toggleClass('auto-width');
});
Here's the demo: http://jsfiddle.net/VE9WR/3/
It could be done in so many ways. it depends on what you're looking for ;)
Using a transition when enlarging an image doesn't seem to work in chrome.
HTML:
<img src="foobar.png">
CSS:
img
{
float: left;
margin-right: 10px;
border-radius: 10px;
width: 200px;
-webkit-transition: width 1s ease, height 1s ease;
}
img:hover
{
width: 100%;
}
Fiddle: http://jsfiddle.net/6Dk4D/
What is wrong?
It won't work with percentages it seems. Also, if you wish to transition height as well, you need to declare it in the orignal img styling. Shown here: http://jsfiddle.net/Skooljester/6Dk4D/1/ it works if you specify a width in pixels for the hover.
Edit: If you specify the first width as a percentage then the second can be defined with a percent as well and still work. Thank you Tyilo
You can also use a max-width trick. Set a high max-width amount on the hover and the original image width will be respected by the transition.
http://codepen.io/rustydev/pen/BKOBNZ