CSS Transitioning a div on jQuery class alter

Question

I have a box I would like to move around the corners of the window. For that I'm using a jQuery attr function on click which takes the box to said corner by altering the class.

The problem here is that I can't get the div to transition between locations on click. My first guess is that the added classes have the coordinates written with top, bottom, left, right tags whereas the original box's css does not contain such parameters. Thing is that if I add the params, the transition sure works, but the box doesn't go where I'd wish it to go. Play around with the pen and you'll see what I'm talking about.

Here's the css of elements:

#menu {
  position: absolute;
  background: @c5;
  width: 160px;
  height: 160px;
  -webkit-transition: all 2s; // Chrome
  -moz-transition: all 2s; // Mozilla
  -o-transition: all 2s; // Opera
  transition: all 2s;
  overflow: hidden;
  border-radius: 50%;
}
.topleft {
  top: 0 ;
  left: 0;
}
.topright {
  top: 0;
  right: 0;
}
.bottomleft {
  bottom: 0 @I;
  left: 0 @I;
}
.bottomright {
  bottom: 0 @I;
  right: 0 @I;

}
.link {
  width: 80px;
  height: 80px;
  float: left;
}

The jQuery is a simple, on click add alter this or that class

$("#m1").click(function(){
     menu.attr('class', 'bottomright');
   });  //this times four

You for more details check THE PEN

It's been 5 hours of trying different things out, and now I'm out of ideas. So if anyone has a better clue on how to get this to work, it would be gladly appreciated.

ps. Google didn't help

Did you try setting your "click" handler to the window and have it step through removing the current class and appending the next class (step) on click? — Korgrue, Jan 04 '16 at 23:31
get the window height and width and width and use margin to move the circle.i did one example for you for top right slice. you can code the rest -- http://codepen.io/anon/pen/YwNojv — Tasos, Jan 04 '16 at 23:48
The issue is because you're setting right when the previously set value is left. CSS transitions will transition a single property, not effective properties. I'll answer in a moment. — abluejelly, Jan 05 '16 at 00:04
you can do it by using (%) instead -- full demo -- http://codepen.io/anon/pen/wMgLNV -- the window is not correct probably because its in an iframe -- demo with (20%) movement on the screen -- http://codepen.io/anon/pen/gPgNEE — Tasos, Jan 05 '16 at 00:23

abluejelly · Accepted Answer · 2016-01-05T00:33:44.047

The trick is to transition on the same values- you can't transition left to right, but you can left to left. Then the only thing fighting you is LESS's compilation of Calc() calls.

Only included the interesting parts here, rest are on the codepen.

http://codepen.io/anon/pen/OMWeqY

@menu_w: 160px;
@menu_h: 160px;

#menu {
  position: absolute;
  top: 0;
  left: 0;
  width: @menu_w;
  height: @menu_h;
  transition: all 2s;
}
#menu.topleft {
  top: 0;
  left: 0;
}
#menu.topright {
  top: 0;
  left: ~"Calc(100% - " @menu_w ~")";
}
#menu.bottomleft {
  top: ~"Calc(100% - " @menu_h ~")";
  left: 0;
}
#menu.bottomright {
  top: ~"Calc(100% - " @menu_h ~")";
  left: ~"Calc(100% - " @menu_w ~")";
}

Don't mind the random /**/ on the codepen, that's vestigial from when I was freaking out over Calc() not working as expected (never really dealt with LESS before). Really not sure why LESS would interpret Calc(100% - 160px) as what it interprets it as, but then, I'm not the designer of LESS.

Not sure why the other two comments did it via margins and a ton of jQ mucking. Something something jQ shoehorning obsession. I'd suggest de-marrying this from jQ as well, but I don't know if anything else on the page uses it, and jQ's pretty lock-in once you start.

"For Further Reading" on LESS calcing calcs... https://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc — abluejelly, Jan 05 '16 at 00:36
This works great, thank you very much. Was also wondering today about the thing LESS has with calc. Either way it seems like a great tool for me — aln447, Jan 05 '16 at 01:57
@aln447 np, thanks for accepting it without prompting. As for LESS, yeah, it's got some nice stuff- those consts are especially nice. — abluejelly, Jan 05 '16 at 16:22

CSS Transitioning a div on jQuery class alter

1 Answers1