CSS在jQuery类上转换div

Question

我有一个盒子，想在窗户的各个角落移动。 为此，我在单击时使用了jQuery attr函数，该函数通过更改类将框移到所说的角落。

这里的问题是我无法使div在点击位置之间转换。 我的第一个猜测是，添加的类具有使用top，bottom，bottom，left，right标签编写的坐标，而原始框的css不包含此类参数。 事实是，如果我添加了参数，过渡效果肯定会起作用，但是盒子不会移到我希望它移到的地方。 玩笔，你会明白我在说什么。

这是元素的css：

#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;
}

jQuery很简单，单击添加即可更改此类或该类

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

有关更多详细信息，请检查笔

尝试不同的事情已经花了5个小时，但现在我没主意了。 因此，如果有人对如何使其更有效地有所了解，将不胜感激。

ps。 Google没有帮助

Answer 1

诀窍是要在相同的值上过渡-您不能left right过渡，但可以left left过渡。 那么，唯一让您困扰的是LESS的Calc()调用的编译。

这里仅包括有趣的部分，其余部分在代码笔上。

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 ~")";
}

不要介意代码笔上的随机/**/ ，这是我对Calc()无法正常工作时的遗迹（以前从未真正处理过LESS）。 真的不确定LESS为什么将Calc(100% - 160px)解释为它解释的内容，但是，我不是LESS的设计师。

不知道为什么其他两个评论通过边距和大量的jQ堆填来做到这一点。 jQ鞋拔痴迷的东西。 我建议也将其与jQ解除关联，但是我不知道页面上是否还有其他东西会使用它，并且jQ一旦启动就相当不错。