removeClass doesn't stop transition in Firefox - javascript

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/

Related

How to end CSS transition with jquery or js?

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>

Angular-animate with height: auto; doesn't work

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>

jQuery toggle animation failing only in Safari

JS:
$('.greenBox').hover(function(){
$(this).addClass('expanded');
$(this).removeClass('contracted');
}, function(){
$(this).removeClass('expanded');
$(this).addClass('contracted');
});
CSS:
.expanded {
height: auto;
min-height:200px;
max-height:750px;
margin-top:5px;
// to make the box move up add back the bottom 300px
// bottom: 300px;
background: linear-gradient(#812990, #9e248e);
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
Here is the 'contracted' class.
.contracted {
max-height: 137px;
overflow:hidden;
}
The jQuery is working. The background color is not changing in Safari because you need to use:
background: -webkit-linear-gradient(#812990, #9E248E);
http://jsfiddle.net/hsqgqojx/

CSS3 Animation: Forwards fill not working with position and display on Safari

So, I have created a CSS3 animation that is supposed to fade out an element by setting its opacity from 1 to 0 and at the last frames change the position to absolute and display to none. But on Safari it will only maintain the opacity, position and display are not set to the final values.
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
display: block;
position: relative;
}
99% {
opacity: 0;
position: relative;
}
100% {
opacity: 0;
display: none;
position: absolute;
}
}
It seems to work on Chrome but not on Safari (I tried version 8). Apparently, position and display do not work properly with animation-fill-mode: forwards...
JSFiddle: http://jsfiddle.net/uhtL12gv/
EDIT For Bounty: I am aware of workarounds with Javascript and transitionend events. But I am wondering why Browsers lack support for this? Does the specification state that fillmode forwards doesnt apply to some attributes like position or is this a bug in the browsers? Because I couldnt find anything in the bug trackers.. If anybody has some insight, I would really appreciate it
As Suggested in the comments, you can adjust the height.
EDIT: Animation Reference Links Added.
Display property is not animatable.
Position property is not
animatable.
List of all CSS properties and if and how they are
animatable.
$('.block').click(function() { $(this).toggleClass('active') });
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
height:0;
}
}
.block {
width: 100px;
height: 100px;
background: blue;
}
.block2 {
width: 100px;
height: 100px;
background: red;
}
.block.active {
-webkit-animation-name: impressum-fade-out;
animation-name: impressum-fade-out;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block2"></div>
I would suggest you the cross-browser solution based on CSS3 Transitions and transitionend event:
JSFiddle
$('.block').one('click', function() {
var $this = $(this);
$this.one('webkitTransitionEnd transitionend', function() {
$this.addClass('block_hidden');
$this.removeClass('block_transition');
});
$this.addClass('block_transition');
});
.block {
width: 100px;
height: 100px;
background: blue;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.block_2 {
background: red;
}
.block_transition {
opacity: 0;
}
.block_hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block block_2"></div>

Start a CSS transition via JS does not work

I want to start a CSS transition, that changes the background-color and the dimension if a button is clicked. But there is a mistake in the code:
js fiddle
jQuery
$(function() {
$('#change').click(function() {
$('#box').addClass('change');
});
});
HTML
<div id="box" class="start"></div>
<div id="button">click</div>
CSS
.start{
height:100px;
width:100px;
background: black;
transition: all 2.0s linear;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
}
.change{
width: 200px;
height: 200px;
background:yellow;
}
#button{
width: 80px;
height: 20px;
padding: 4px;
margin: 5px;
border:solid 1px black;
background: grey;
cursor: pointer;
color: white;
}
The id of the button in the HTML & CSS (#button) is different from the id of the button in the JS (#change), that's why.
If you replace #change with #button in the JS, then it works.
Note: When you list transition rules for various browsers, you don't need the -ms- one (IE10 supports transitions unprefixed and IE9 does not support them at all; the -ms- prefix was only needed for early IE10 previews) and you should always put the unprefixed one last. At this point, all current versions of desktop browsers support transitions unprefixed.
Id of your button is button, not change.
Use $('#button') instead of $('#change').
DEMO HERE.
It should be using #button,
$(function() {
$('#button').click(function() {
$('#box').addClass('change');
});
});
as per your HTML
<div id="button">click</div>
http://jsfiddle.net/qsAZQ/

Categories

Resources