代码之家 › 专栏 › 技术社区 › Gil Epshtain

CSS-如何在删除时反转动画

css-animations css

Gil Epshtain · 技术社区 · 8 年前

我在我的网站上有一个页面,在这里我并排显示到面板上。我将在两个视图中显示这两个面板:水平和垂直。我有一个按钮可以在这两个视图之间切换。我正在尝试在两个视图之间的转换中添加一些CSS动画。但是,我的动画只在一个方向上工作(从垂直到水平),反向动画显示的顺序错误。

var isVertical = false;
var boxes = $(".box");

function toggleViews() 
{ 
  isVertical = !isVertical;
  if (isVertical)
  {
    boxes.addClass("vertical-box");
  }
  else
  {
    boxes.removeClass("vertical-box");
  }
}

.container 
{
  display: block;
  width: 400px;
  height: 150px;
  border: 2px solid black;
  overflow: hidden;
}
.box 
{
  -webkit-transition-property: width, height;
  -webkit-transition-duration: 2s, 2s;
  -webkit-transition-delay: 0s, 2s;
  -webkit-transition-timing-function: ease;

  display: inline-block;
  width: 50%;
  height: 100%;
}
.vertical-box 
{
  width: 100%;
  height: 50%;
}
.a { background-color: darkred; }
.b { background-color: darkorchid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <button onclick="toggleViews()">toggle</button>
  <div class="container">
    <div class="a box">A</div><div class="b box">B</div>
  </div>
</body>
</html>

1 回复 | 直到 8 年前

SirPilan 8 年前

var isVertical = false;
var boxes = $(".box");

function toggleViews() 
{ 
  isVertical = !isVertical;
  if (isVertical)
  {
    boxes.addClass("vertical-box");
  }
  else
  {
    boxes.removeClass("vertical-box");
  }
}

.container 
{
  display: block;
  width: 400px;
  height: 150px;
  border: 2px solid black;
  overflow: hidden;
}
.box 
{
  -webkit-transition-property: height, width; /* swapped */
  -webkit-transition-duration: 0.5s, 0.5s;
  -webkit-transition-delay: 0s, 0.5s;
  -webkit-transition-timing-function: ease;

  display: block; /* TRY THIS */
  float: left; /* AND THIS */
  width: 50%;
  height: 100%;
}
.vertical-box 
{
  -webkit-transition-property: width, height; /* added */
  width: 100%;
  height: 50%;
}
.a { background-color: darkred; }
.b { background-color: darkorchid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <button onclick="toggleViews()">toggle</button>
  <div class="container">
    <div class="a box">A</div><div class="b box">B</div>
  </div>
</body>
</html>

解释

补充 transition-property: width, height; 到 .vertical-box

所需行为:展开宽度、Shink高度;展开高度、收缩宽度。

.box 有 transition-property 先高后宽 .垂直框 覆盖和翻转过渡属性:首先是宽度,然后是高度

您可能认为这是错误的顺序,但一旦单击,类就被不自觉地应用,但转换需要时间。所以你从 盒子 到 .垂直框 具有 .垂直框 反之亦然。

编辑回答使用动画(有点黑客,因为我找不到重置当前关键帧的方法)

var isVertical = false;
var boxes = $(".box");

function toggleViews() 
{ 
  isVertical = !isVertical;
  if (isVertical)
  {
    boxes.removeClass("vertical-box-reverse");
    setTimeout(function() { boxes.addClass("vertical-box"); },0);
  }
  else
  {
    boxes.removeClass("vertical-box");
    setTimeout(function() { boxes.addClass("vertical-box-reverse"); },0);
  }
}

.container 
{
  display: block;
  width: 400px;
  height: 150px;
  border: 2px solid black;
  overflow: hidden;
}
.box 
{
  display: block;
  float: left;
  width: 50%;
  height: 100%;
}

.a.vertical-box { animation: boxAnimationA 1s normal forwards; }
.b.vertical-box { animation: boxAnimationB 1s normal forwards; }

.a.vertical-box-reverse { animation: boxAnimationA 1s reverse forwards; }
.b.vertical-box-reverse { animation: boxAnimationB 1s reverse forwards; }

.a { background-color: darkred; }
.b { background-color: darkorchid; }

/* Keyframes */
@keyframes boxAnimationA {
  0% { width: 50%; }
  50% { width: 100%; height: 100%; }
  100% { width: 100%; height: 50%; }
}

@keyframes boxAnimationB {
  0% { width: 50%; }
  50% { width: 0%; height: 100%; }
  51% { width: 100%; height: 100%; }
  100% { width: 100%; height: 50%; }
}

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
<HTML>
<正文>
<button onclick=“toggleviews()”>切换</button>
<div class=“container”>
<DIV class=“a box”>A</DIV><DIV class=“b box”>B</DIV>
</DIV>
</body>
</html>