CSS Transition doesn't work with top, bottom, left, right - javascript

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

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>

How to set css3 animation inline or by javascript?

I'd like to set css3 animation effect to multi element, but the animated position was related to the count of elements which is not certain. I had to set css style by js (maybe a mvvm framework).
sample code:
#-webkit-keyframes position {
0% {left:0}
100% {left: 5*elementCounts px;}
}
I found there's no way to set css property by data-*, neither to add inline css3 animation defining inline.
Anybody have idea to resolve this in css or mvvm way?
Two options:
If the number of possible ending positions is small and/or known in advance, you could write a number of variants of your keyframe definition with different names (position10, position20, etc).
If that is not an option, consider setting the element's position with jQuery so you can do all the calculations you need, and only relying on CSS for the animation duration. Here's a fiddle showing how you can achieve that:
JS
$(document).ready(function() {
// calculate the intended location
var div1Position = 100*1;
var div2Position = 100*2;
$('#div1').animate({ left: div1Position });
$('#div2').animate({ left: div2Position });
});
HTML
<div id="parent">
<div id="div1" class="box">Test #1</div>
<div id="div2" class="box">Test #2</div>
</div>
CSS
#parent {
position: relative;
}
.box {
background-color: grey;
color: red;
position: absolute;
display: block;
height: 75px;
width: 75px;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
Hope this helps!

ease toggle with jquery/html/css3 not working in ie properly

JSfiddle
Here is a fiddle for what I am trying to do. I am trying to use pure css with exception of jquery to toggle the appropriate class and let the css transitions handle the rest. I know this isn't supported by old IE's which is fine with me at this point.
What is happening is for when ever I click the link text the on/off the slider moves and eases just fine. However, when I hit the actual slider portion of the button it moves over suddenly with no easing. Here is the code:
HTML
<a href="#" class="on-off">
<span class="on">ON</span>
<span class="off">OFF</span>
<span class="slider right ease"></span>
</a>
CSS
.on-off {
display: inline-block;
position: relative;
padding: 5px;
background: #ff8600;
border-radius: 5px;
border: 1px solid #b8baba;
}
.on-off .on {
margin-right: 10px;
}
.slider {
position: absolute;
width: 50%;
height: 100%;
background: #fff;
z-index: 2;
border-radius: 5px;
border: 1px solid #b8baba;
}
.right {
top: 0;
right: 0;
}
.left {
top: 0;
right: 50%;
}
.ease {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Javascript
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').removeClass('right');
$('.slider').addClass('left');
} else {
$('.slider').removeClass('left');
$('.slider').addClass('right');
}
})
This does work in chrome/firefox just fine. Just not IE10/11. I am trying to use graceful degradation. Keep things lightweight so if css can handle it not to use javascript where also it has basic functionality it just might toggle rather than ease in unsupported browsers. I know IE10/11 supports ease as it is working. just not when I click that particular area of the button.
Thanks for the help.
Hey this is going to sound dumb, but here's the solution
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').addClass('left');
$('.slider').removeClass('right');
} else {
$('.slider').addClass('right');
$('.slider').removeClass('left');
}
});
Add before you remove, and add a semicolon to your function.

How to show wind direction on a compass

I am working on a web application where I have to show the temperature, humidity, wind speed, wind direction etc. I am using google.visualization.Gauge() to show other things but I want to show wind direction on a compass. Does anyone know about any (jQuery/javascript/etc) compass available that I can use for a website/webapp?
Thanks
Here's my approach using only CSS. Uses transforms to rotate the needle. DEMO You can also use the jQuery Rotate plugin.
HTML
<div id="compass">
<div id="arrow"></div>
</div>​
CSS
#compass {
width: 380px;
height: 380px;
background-image:url('http://i.imgur.com/44nyA.jpg');
position: relative;
}
#arrow {
width: 360px;
height: 20px;
background-color:#F00;
position: absolute;
top: 180px;
left: 10px;
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-o-transform:rotate(120deg);
-ms-transform:rotate(120deg);
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#compass:hover #arrow {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
}​
HTML5 and it's Canvas will make short work of this.
http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm
I'm just posting it here for completeness, personally I'd still stick to a javascript library.

How to change the text of a table cell while hovering using only CSS3

I was wondering if anyone in SO would be kind enough to assist me. Using only CSS (most-likely CSS3), is there a way to change the inner HTML of a table cell while hovering over the element? I have a numerical table with 49 cells (7 rows by 7 columns), and I would like the number in the first cell of the first row to change from number 1 to number 50, but only when hovering over the number 1 (i.e. - changing back to number 1 when not hovering).
I can do this with a "change innerHTML" function in JavaScript, but only when using a portion of the script inline with my HTML within the body of the document. For various reasons, I cannot use any script or CSS inline, so this method of achieving my goal is not what I want to use (this goes beyond semantic reasons). I would really rather avoid using any script at all for this effect because I think CSS3 handles effects more elegantly and selectively than JavaScript (i.e. - CSS3 Tooltips are much nicer than any script-based Tooltip).
I was just wondering if someone knew how to do this using CSS3 (maybe with the z-index, display: none; or positioning techniques somehow?}. I've played around with it, but I can't seem to figure it out. I would use JavaScript if I didn't have to mix the script in with my Markup, but there doesn't appear to be a way to do that.
Anyone have ideas on how to go about this? Thank you for your time.
Update
#ramsesoriginal
#hiphip
Thanks again. I answered "Yes" to the "Did this answer help you." I believe that is what you meant by "as accepted" ramsesoriginal; right? Thanks hiphip for your answer as well. I was playing around with styles like the code below, but it wasn't quite working out in the table cell the way I had hoped (works nice with isolated images by the way). I think I'll keep working on it though; the more options, the better.
div.up {
margin: 10px 0;
position: relative;
width: 40px;
height: 40px;
border: 1px solid rgb(170, 169, 169);
overflow: hidden;
}
div.up div {
width: 40px;
height: 40px;
font-size: 13px;
padding: 10px;
position: absolute;
top: 0;
left: 0;
text-align: center;
background: rgba(255, 255, 255, 1.000);
-moz-transition: left 1s linear;
-webkit-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 1s linear;
}
div.up div.one {
z-index: 999;
}
div.up:hover div.one {
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 1s linear;
left: -99px;
}
There are two ways, but both require some additional markup:
<td id="example1" class="hoverer"><span class="nohower">1</span><span class="hover">50</span></td>
with the styling
#example1 .hover{
display:none;
}
#example1 .nohower{
display:block;
}
#example1:hover .hover{
display:block;
}
#example1:hover .nohower{
display:none;
}
or
<td id="example2" class="hoverer"><span data-hover="50">1</span></td>
with the styling
#example2:hover span:after{
content:attr(data-hover);
}
#example2:hover span{
width:1px;
margin-left: -0.5em;/* adjust accoridng to font*/
}
You can view a working demo here: http://jsfiddle.net/ramsesoriginal/W8LQq/
This is not possible.
CSS is only used for styling HTML. It has no access to the attributes of the HTML itself.
No way to do this with only CSS
With positioning:
<style>
#outterdiv {
position: relative;
width:20px;
height:20px;
overflow:hidden;
border: 1px blue solid;
}
#innerdiv:hover {
width:20px;
height:20px;
position: absolute;
top: -20px;
}
</style>
<div id="outterdiv">
<div id="innerdiv">
<div>1</div>
<div>50</div>
</div>
</div>

Categories

Resources