CSS 从中心过渡到右下角答案

【问题标题】：CSS transition to bottom-right from centerCSS 从中心过渡到右下角
【发布时间】：2014-06-03 22:24:47
【问题描述】：

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

这应该发生在动画中。我尝试了将拉伸元素动画到顶部的 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;
}

我应该怎么做？

【问题讨论】：

这是一个两步动画，您应该查看关键帧css-tricks.com/snippets/css/keyframe-animation-syntax
查看 CSS 转换。
@vico 对不起，我忘了说我也应该支持 IE9。
我猜你可以用 jquery add class 伪造第二步
@vico 你能提供解决方案吗？我不能使用 jquery，但可能我可以通过引用将它转换为 javascript。 :)

标签： javascript html css css-transitions

【解决方案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 居中，它的优点得到了很好的支持，但是我们必须在更改 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.

【讨论】：

谢谢，在 chrome 中工作正常，但在 IE10 中不行。我不介意即使动画不起作用但缩小的容器在中间可见但在 IE10 及更低版本的右下角不可见。
@Mr_Green 你为 IE 添加前缀了吗？
@Mr_Green 请试试这个演示 jsfiddle.net/tyuAk/11 我已经为你添加了前缀，它是从演示 1 中编辑的。
它在IE10中工作但在IE9中不工作，容器在收缩后在中间可见但在右下角不可见。我知道动画在 IE9 中不起作用，但至少在动画结束后容器应该在右下角可见。我希望你明白我的意思。
@Mr_Green 我在上次更新的演示中为您找到了解决方法，请查看它是否有效（我没有 IE9 来测试它）。

【解决方案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;
}

我将位置设置为absolute，将bottom和right属性设置为0。由于该元素不再在文档流中，因此我使用calc移动将元素设置为比高度小100px。

【讨论】：

啊，我错过了收缩到中间部分...金刚的回答是最好的。

【解决方案3】：

我试过了

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

在 jquery 中

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

【讨论】：