Question

我要求容器在整个页面上伸展。当我点击容器时，它应该变小。

动画会发生这种情况。我尝试了css过渡，它将拉伸元素设置为顶部动画：

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

但我想要的是

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

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。

Demo.

上面的演示使用负边距来区分div，它的优势得到了很好的支持，但我们必须改变负边距＆＃39;更改div大小时的值。另一种方法是使用translate转换，这将使div大大居中，但它需要浏览器支持转换功能。以下是使用translate代替居中div Demo 2 的演示。

这是另一种仅使用animation的解决方案，转换仅用于动画颜色变化。

Demo 3

更新：以上所有演示适用于支持动画功能的浏览器。但遗憾的是 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;
}

Updated Demo

Answer 2

你的意思是这样的：fiddle

这是我改变的内容：

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

我将位置设置为绝对，将bottom和right属性设置为0.由于元素不再位于文档流中，我使用calc来移动设置元素100px小于高度。

Answer 3

我试过了

<强> http://jsfiddle.net/tyuAk/15/

在jquery tho

$("#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从中心向右下角过渡

3 个答案:

Demo.

Demo 3

Updated Demo