时间戳

首页 > 解决方案 > CSS - 如何在移除时反转动画

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

问题描述

我的网站上有一个页面，我在其中并排显示面板。我在 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>

标签： csscss-animations

解决方案

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");
    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>

推荐阅读