I want to make animation using angular-animate. My css rules is:
.expanded {
transition: all ease 0.5s;
overflow: hidden;
}
.expanded.ng-hide {
height: 0px;
}
If I add, for example, height: 100px to .expanded class, then everything works fine. But how to make it works without height definition? I need this, because the content of .expanded container might be different.
use * as auto,
example :
state('in', style({
overflow: 'hidden',
height: '*',
width: '300px'
})),
Documentation
kirill.buga's post helped me out so after reading this post and some others I made some modification to kirill.buga's post. I got rid of the container height since it was supposed to be auto, slowed down the transition and then hid the overflow so that when the div collapsed, the content inside the div would no longer be visible.
#container {
max-height: 20px;
background: red;
overflow:hidden;
transition: max-height 2s ease-in;
}
#container:hover {
max-height: 800px;
}
plunker example
It's not possible to animate height to 'auto' in CSS (neither in angularJS). You can try to play with max-height instead. There are some impacts of that, but at least you can try. So animate not height from 0 to auto, but max-height. You can set max-height a much bigger than the height you need and that would work.
#container {
max-height: 0;
height: 100px;
background: red;
transition: max-height .3s ease-in;
}
#container:hover {
max-height: 500px;
}
<div id="container">
Hover me
</div>
Related
I want to create an expand/collapse animation that's powered only by classnames (javascript is used to toggle the classnames).
I'm giving one class max-height: 4em; overflow: hidden;
and the other max-height: 255em; (I also tried the value none, which didn't animate at all)
this to animate: transition: max-height 0.50s ease-in-out;
I used CSS transitions to switch between them, but the browser seems to be animating all those extra em's, so it creates a delay in the collapse effect.
Is there a way of doing it (in the same spirit - with css classnames) that doesn't have that side-effect (I can put a lower pixel count, but that obviously has drawbacks, since it might cut off legit text - that's the reason for the big value, so it doesn't cut off legit long text, only ridiculously long ones)
See the jsFiddle - http://jsfiddle.net/wCzHV/1/ (click on the text container)
Fix delay solution:
Put cubic-bezier(0, 1, 0, 1) transition function for element.
scss
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
}
css
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
.text.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
This is an old question but I just worked out a way to do it and wanted to stick it somewhere so I know where to find it should I need it again :o)
So I needed an accordion with clickable "sectionHeading" divs that reveal/hide corresponding "sectionContent" divs. The section content divs have variable heights, which creates a problem as you can't animate height to 100%. I've seen other answers suggesting animating max-height instead but this means sometimes you get delays when the max-height you use is larger than the actual height.
The idea is to use jQuery on load to find and explicitly set the heights of the "sectionContent" divs. Then add a css class 'noHeight' to each a click handler to toggle it:
$(document).ready(function() {
$('.sectionContent').each(function() {
var h = $(this).height();
$(this).height(h).addClass('noHeight');
});
$('.sectionHeader').click(function() {
$(this).next('.sectionContent').toggleClass('noHeight');
});
});
For completeness, the relevant css classes:
.sectionContent {
overflow: hidden;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.noHeight {
height: 0px !important;
}
Now the height transitions work without any delays.
In case anyone is reading this, I have not found a solution and went with an expand-only effect (which was achieved by moving the transition style to the expanded class definition)
Use display:flex. This will work:
.parent > div {
display: flex;
flex-direction: column;
height: 0px;
max-height: 0px;
opacity: 0;
overflow: hidden;
transition: all 0.3s;
}
.parent > div.active {
opacity: 1;
height: 100%;
max-height: none; /* important for animation */
}
The solution is actually quite simple. Make a child div, that has the content. The parent div will be the one that expands collapses.
On load the parent div will have a max-height. when toggling, you can check the child height by writing document.querySelector('.expand-collapse-inner').clientHeight; and set the maxheight with javascript.
In your CSS, you will have this
.parent {
transition: max-height 250ms;
}
You can accomplish this just fine using jQuery Transit:
$(function () {
$(".paragraph").click(function () {
var expanded = $(this).is(".expanded");
if (expanded)
{
$(this).transition({ 'max-height': '4em', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
}
else
{
$(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () { $(this).addClass("expanded"); });
}
});
});
You can definitely tidy it up a bit to your liking, but that should do what you want.
JS Fiddle Demo
I want to end my css transition with jquery or js. I don't mean pause, I want to end them, as if they became 100% done. I have css transitions and not animations.
The properties I am using transition on are top and left, and it is a position absolute element.
You can simply override the transition-property rule to none.
#el {
position: relative;
left: 0;
top: 25px;
width: 50px;
height: 50px;
transition: all 5s linear;
background: red;
}
body:hover #el{
left: calc(100vw - 50px);
}
button:active + #el {
transition-property: none;
}
:root,body{margin:0}
<button>stop transition</button>
<div id="el"></div>
Now how you trigger this is up to you, it can be using a special class, or any other condition.
Hello your question is kinda ambiguous.
if you are using transition instead of animation you can control the flow of it in the same css example :
transition: background-color .2s linear 0s; /*Standard*/
If you want to interrupt the transition with JS you can assign other Css valor to an different class name or property when some action you want is triggered.
.normal{
transition: background-color .2s linear 0s; /*Standard*/
}
[stop = yes] {
background: black;
}
document.body.addEventListener('mouseover', function(e){
e.stopPropagation();
if(someting you want){
document.queryselector(".normal").setAttribute("stop","yes");
}
else{
document.queryselector(".normal").setAttribute("stop","no");
}
},false);
if something you want were triggered then the atribute will be set to the no
transition and this also cut off the running one.
$('.toggle-animation').click(function(){
$('.element').stop(true).toggleClass('animating');
});
.element{
top: 0px;
left: 0px;
width: 100px;
height: 100px;
position:relative;
background: red
}
.animating{
top: 100px;
left: 100px;;
transition: all 5s linear 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element"></div>
<button type="button" class="toggle-animation">Click me</button>
I need to stop transition animation, to do that I just remove "animation" css class that defines the transition for element. It works perfectly in Chrome and Safari, but not in Firefox. Why's so?
CSS:
div {
background-color: green;
width: 100px;
height: 100px;
}
.animated {
transition: width 5s, height 5s;
}
.big {
width: 200px;
height: 200px;
}
HTML (needs jQuery):
start |
stop
<div></div>
Codepen:
https://codepen.io/anon/pen/KQPJmo
This should do the trick:
add a .notransition class instead of removing the .animated class:
css:
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
html:
stop
Example (works in Firefox):
https://jsfiddle.net/v149sht6/4/
Objective: Animate div on content resize.
Given:
Div height and width are not specified.
Div size depends on content size.
When content size changes, div size also changes (without animation, resizes within 0.5FPS).
Question: How do I apply animation/effect on div when it is dynamically changing size, depending on content?
NOTE: one good example of this is #gmail (card resizes on successful next)
There is a way for this. You need to use a one hidden element for that way. You have to set the content in both elements. try the following
HTML:
<span id="hiddenElement"></span>
<div id="displayElement"></div>
CSS:
#hiddenElement
{
max-width: 200px;
opacity: 0;
/* use different properties to completely hide. but do not give width:0 */
}
#displayElement
{
width: auto;
height: auto;
max-width: 200px;
-webkit-transition: width 0.5s, height 0.5s; /* Safari */
transition: width 0.5s, height 0.5s;
border: 1px solid black;
overflow: hidden;
}
JS method:
function setContent(content)
{
$("#hiddenElement").text(content);
$("#displayElement").text(content);
$("#displayElement").width($("#hiddenElement").width());
$("#displayElement").height($("#hiddenElement").height());
}
Apply a max-height and a max-width and a display property of inline-block.
div {
display: inline-block;
background:red;
transition: max-height 1s, max-width 1s;
max-height:0;
max-width:0;
}
div:hover {
max-height:200px;
max-width:400px;
}
<div>yada yada yada</div>
I have an element with style
position: relative;
transition: all 2s ease 0s;
Then I want to change its position smoothly after clicking on it, but when I add the style change the transition doesn't take place, instead, the element moves instantly.
$$('.omre')[0].on('click',function(){
$$(this).style({top:'200px'});
});
However, if I change the color property, for example, it changes smoothly.
$$('.omre')[0].on('click',function(){
$$(this).style({color:'red'});
});
What might be the cause of this? Are there properties that aren't 'transitional'?
EDIT: I guess I should have mentioned that this is not jQuery, it's another library. The code appears to work as intended, styles are being added, but transition only works in the second case?
Try setting a default value for top in the CSS to let it know where you want it to start out before transitioning:
CSS
position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */
The reason this is needed is because you can't transition from a keyword, and the default value for top is auto.
It is also good practice to specify exactly what you want to transition (only top instead of all) both for performance reasons and so you don't transition something else (like color) unintentionally.
Perhaps you need to specify a top value in your css rule set, so that it will know what value to animate from.
In my case div position was fixed , adding left position was not enough it started working only after adding display block
left:0;
display:block;
Something that is not relevant for the OP, but maybe for someone else in the future:
For pixels (px), if the value is "0", the unit can be omitted: right: 0 and right: 0px both work.
However I noticed that in Firefox and Chrome this is not the case for the seconds unit (s). While transition: right 1s ease 0s works, transition: right 1s ease 0 (missing unit s for last value transition-delay) does not (it does work in Edge however).
In the following example, you'll see that right works for both 0px and 0, but transition only works for 0s and it doesn't work with 0.
#box {
border: 1px solid black;
height: 240px;
width: 260px;
margin: 50px;
position: relative;
}
.jump {
position: absolute;
width: 200px;
height: 50px;
color: white;
padding: 5px;
}
#jump1 {
background-color: maroon;
top: 0px;
right: 0px;
transition: right 1s ease 0s;
}
#jump2 {
background-color: green;
top: 60px;
right: 0;
transition: right 1s ease 0s;
}
#jump3 {
background-color: blue;
top: 120px;
right: 0px;
transition: right 1s ease 0;
}
#jump4 {
background-color: gray;
top: 180px;
right: 0;
transition: right 1s ease 0;
}
#box:hover .jump {
right: 50px;
}
<div id="box">
<div class="jump" id="jump1">right: 0px<br>transition: right 1s ease 0s</div>
<div class="jump" id="jump2">right: 0<br>transition: right 1s ease 0s</div>
<div class="jump" id="jump3">right: 0px<br>transition: right 1s ease 0</div>
<div class="jump" id="jump4">right: 0<br>transition: right 1s ease 0</div>
</div>
Are there properties that aren't 'transitional'?
Answer: Yes.
If the property is not listed here it is not 'transitional'.
Reference: Animatable CSS Properties