Javascript CSS从中间过渡到右下角

我有一个要求，容器在页面上伸展。当我点击容器时，它会变小

这应该发生在动画中。我尝试了css转换，它将拉伸元素设置为顶部动画：

• 向右上移动时，缓慢收缩至提供的尺寸

但我想要的是

• 在中间收缩，然后通过设置动画移动到页面的右下角

CSS

---

我该怎么做呢？

您可以尝试将

过渡

和

动画

结合起来。即使您在此处也只能使用

动画

：

#main {
  position: fixed;
  height: 100%;
  width: 100%;
  left:0;
  top:60px;        
  background-color: red;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;    
  -moz-transition: all 0.5s ease;
}
#click:hover + #main {
  position: fixed;
  width: 100px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin-left:-50px;
  margin-top:-25px;
  background-color: green;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-animation: to-bottom-right 0.5s 0.5s forwards;
}
#click {
  width: 100px;
  height: 50px;
  background-color: cornflowerblue;
  color: white;
  font-weight: bold;
  text-align: center;
}


@-webkit-keyframes to-bottom-right {    
  100% {
    left: 100%;
    top: 100%;
    margin-left:-100px;
    margin-top:-50px;
  }
}

请使用基于webkit的浏览器测试演示，您可以自己为其他浏览器添加前缀。请注意，

动画

将在转换完成后运行，因此我们必须使用

动画延迟

上面的演示使用负边距来居中div，它的优势得到了很好的支持，但我们必须在更改div的大小时更改负边距的值。另一种方法是使用

translate

transform，这将大大居中div，但它需要浏览器支持transform功能。下面是使用

translate

将div居中的演示

这里是另一个仅使用

动画的解决方案，转换仅用于设置颜色更改的动画

.
更新：以上所有演示都适用于支持动画功能的浏览器。但是遗憾的是，IE9不支持此功能。我尝试过使用一些变通方法，并通过使用多重转换找到了解决方案。第一次转换持续
0.5s
，而第二次转换将在
0.5s
之后开始。要从中间到右下角设置div的动画，必须对
translate
变换使用
transition
。以下是它应该是的代码：

#main {
  position: fixed;
  height: 100%;
  width: 100%;
  left:0;
  top:60px;        
  background-color: red;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;    
  -moz-transition: all 0.5s ease;
}
#click:hover + #main {
  position: fixed;
  width: 100px;
  height: 50px;
  left: 50%;
  top: 50%;
  margin-left:-50px;
  margin-top:-25px;
  background-color: green;   

  -webkit-transform:translate(50vw , 50vh) translate(-50%,-50%);
  -ms-transform:translate(50vw , 50vh) translate(-50%,-50%);
  -moz-transform:translate(50vw , 50vh) translate(-50%,-50%);
  transform:translate(50vw , 50vh) translate(-50%,-50%);
  -webkit-transition: all 0.5s ease, -webkit-transform 0.5s 0.5s ease;
  -ms-transition: all 0.5s ease, -ms-transform 0.5s 0.5s ease;
  -moz-transition: all 0.5s ease, -moz-transform 0.5s 0.5s ease;
  transition: all 0.5s ease, transform 0.5s 0.5s ease;    
}
#click {
  width: 100px;
  height: 50px;
  background-color: cornflowerblue;
  color: white;
  font-weight: bold;
  text-align: center;
}

.你的意思是这样的：

以下是我所改变的：

#main {
    position: absolute;
    bottom: 0;
    right: 0;
    height: calc(100% - 100px);
    width: 100%;
    background-color: red;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
#click:hover + #main {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 50px;
    margin-top: 50px;
    background-color: green;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

我将位置设置为绝对，将底部和右侧属性设置为0。由于该元素不再位于文档流中，我使用calc移动并设置元素100px，使其小于高度。
我尝试过


在jquerytho中

$("#click").hover(
  function() {
    setTimeout( '$("#main").delay(500).attr("id","newclass");' ,500 );
});

#main {
    position: absolute;
    height: 100%;
    width: 100%;

    background-color: red;

}
#newclass {
    position: absolute;
    height: 50px;
    width: 100px;
    margin-top:25%;
    background-color: green;

}
#click:hover + #main {
    width: 100px;
    height: 50px;
    margin-top:25%;
    background-color: green;
    transition-property:width,height,margin;
    transition: 0.5s ease;
}


#click {
    width: 100px;
    height: 50px;
    background-color: cornflowerblue;
    color: white;
    font-weight: bold;
    text-align: center;
}

#click:hover + #newclass {
    margin-top:0px;
    transition: all 0.5s ease;
}

这是一个两步动画，你应该看看关键帧，看看CSS变换。@维科，对不起，我忘了提到我还应该支持IE9。我想你可以用jquery add来模拟这两步class@vico你能提供解决方案吗。我不能使用jquery，但可能我可以通过引用将其转换为javascript:）啊，我错过了中段的心理医生。。。KingKong给出的答案是最好的。谢谢，在chrome中工作很好，但在IE10中没有。即使动画不起作用，我也不介意，但在IE10及以下版本中，缩小的容器在中间可见，但在右下角不可见。@Mr_Green您是否为IE添加了前缀？@Mr_Green请尝试此演示我为您添加了前缀，它是从演示1中编辑的。它在IE10中起作用，但在IE9中不起作用，收缩后，容器在中间可见，但在右下角不可见。我知道动画在IE9中不起作用，但至少在动画结束后，容器应该在右下方可见。我希望你明白我的意思。@U Green先生，我在上次更新的演示中为你找到了一个解决方案，请看看它是否有效（我没有IE9来测试它）。
$("#click").hover(
  function() {
    setTimeout( '$("#main").delay(500).attr("id","newclass");' ,500 );
});

#main {
    position: absolute;
    height: 100%;
    width: 100%;

    background-color: red;

}
#newclass {
    position: absolute;
    height: 50px;
    width: 100px;
    margin-top:25%;
    background-color: green;

}
#click:hover + #main {
    width: 100px;
    height: 50px;
    margin-top:25%;
    background-color: green;
    transition-property:width,height,margin;
    transition: 0.5s ease;
}


#click {
    width: 100px;
    height: 50px;
    background-color: cornflowerblue;
    color: white;
    font-weight: bold;
    text-align: center;
}

#click:hover + #newclass {
    margin-top:0px;
    transition: all 0.5s ease;
}