CSS从中间过渡到右下角

Question

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

这应该发生在动画中。我尝试了css transition，它将拉伸元素动画到top:

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

但是我想要的是

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

小提琴

CSS

#main {
    position: fixed;
    height: 100%;
    width: 100%;
    margin-top: 50px;
    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;
    margin-top: 50px;
    background-color: green;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
#click {
    width: 100px;
    height: 50px;
    background-color: cornflowerblue;
    color: white;
    font-weight: bold;
    text-align: center;
}

我该怎么做?

Answer 1

您可以尝试同时使用transition和animation。甚至你可以在这里只使用animation:

#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的浏览器测试演示，您可以自己为其他浏览器添加前缀。注意，animation将在转换完成后运行，因此我们必须使用animation-delay。

演示。

上面的演示使用负边距来居中div，它的优点得到很好的支持，但是我们必须在改变div的大小时改变负边距的值。另一种方法是使用translate变换，这将极大地居中div，但它需要浏览器支持变换功能。下面是使用translate来居中div 的演示2。

这是另一个解决方案，只使用animation，过渡只是用于动画的颜色变化。

演示3。

UPDATE:上面所有的演示对于支持动画特性的浏览器都可以完美地工作。然而遗憾的是，IE9不支持此功能。我试过使用一些变通方法，我通过使用多过渡找到了解决方案。第一次转换将持续到0.5s，而第二次转换将在0.5s之后开始。为了使div从中心移动到右下角，您必须使用transition进行translate变换。代码应该是这样的:

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

更新演示。

Answer 2

你是说这样吗?

以下是我修改的内容:

#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

Answer 3

我试过了

http://jsfiddle.net/tyuAk/15/

$("#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;
}