Question

我的网站上有一个页面，可以并排显示在面板上。我在2个视图中显示这2个面板：水平和垂直。我有一个在这两个视图之间切换的按钮。我试图在两个视图之间的过渡上添加一些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>

Answer 1

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

期望的行为：扩展宽度，收缩高度；扩大高度，缩小宽度。

.box的第一个高度为transition-property，然后为宽度 .vertical-box会覆盖并翻转过渡属性：首先是宽度，然后是高度

您可能会认为这是错误的顺序，但是，一旦单击该类，就会立即应用该类，但是过渡需要时间。因此，您可以从.box到.vertical-box到.vertical-box的过渡属性，反之亦然。

编辑使用动画进行回答（有点笨拙，因为我找不到重置当前关键帧的方法）

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>
<body>
  <button onclick="toggleViews()">toggle</button>
  <div class="container">
    <div class="a box">A</div><div class="b box">B</div>
  </div>
</body>
</html>

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

1 个答案: