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

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

转载作者：太空宇宙更新时间：2023-11-04 01:10:17

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

最佳答案

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 覆盖和翻转过渡属性:首先是宽度，然后是高度

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

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

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

function toggleViews() 
{ 
  isVertical = !isVertical;
  if (isVertical)
  {
    boxes.removeClass("vertical-box-reverse");
    window.requestAnimationFrame(function() { // apply to forget animation state
      window.requestAnimationFrame(function() { // re-apply animation
        boxes.addClass("vertical-box");
      });
    });
  }
  else
  {
    boxes.removeClass("vertical-box");
      
    window.requestAnimationFrame(function() { // apply to forget animation state
    boxes.addClass("vertical-box-before-reverse"); // apply to set animation end-like state
     window.requestAnimationFrame(function() { // re-apply animation
      boxes.removeClass("vertical-box-before-reverse");
      boxes.addClass("vertical-box-reverse");
      });
    });
  }
}

.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 ease-in reverse forwards; }
.b.vertical-box-reverse { animation: boxAnimationB 1s ease-in reverse forwards; }

.vertical-box-before-reverse { width: 100%; height: 50%; }


.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 - 如何在移除时反转动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51348295/