javascript - 在 div 中翻转动画不隐藏 Canvas 。预期行为是隐藏 Canvas

Question

Demo

我想要一个可以来回翻转的div。我的第一个 div 可以包含任何东西。我的第二个包含使用 chart.js 的 Canvas 。我想翻转这两个 div，并希望通过单击页面最左侧的按钮隐藏另一个。

问题是 jar 头并没有隐藏起来，只是在翻转。但如果 Canvas 是当前页面，则另一个隐藏。如果另一个是当前 div，则 Canvas 只是翻转到另一侧。

document.getElementById('shortcut').addEventListener('click', function(event) {
  event.preventDefault();
  document.getElementById('side-2').className = 'flip flip-side-1';
  document.getElementById('side-1').className = 'flip flip-side-2';
}, false);

document.getElementById('budget').addEventListener('click', function(event) {
  event.preventDefault();
  document.getElementById('side-2').className = 'flip';
  document.getElementById('side-1').className = 'flip';
}, false);

var data = [{
  value: 300,
  color: "#F7464A",
  highlight: "#FF5A5E",
  label: "Red"
  //filter: 1
}, {
  value: 50,
  color: "#46BFBD",
  highlight: "#5AD3D1",
  label: "Green"
  //filter: 2
}, {
  value: 100,
  color: "#FDB45C",
  highlight: "#FFC870",
  label: "Yellow"
  //filter: 3
}]

$(document).ready(function() {
  var ctx = $("#chart").get(0).getContext("2d");
  var chart = new Chart(ctx).Doughnut(data);

  var segments = chart.segments;
  for (var i = 0; i < segments.length; i++) {
    // Add properties in here like this
    segments[i].filter = i + 1;
  }

  $("#chart").click(
    function(evt) {
      var activePoints = chart.getSegmentsAtEvent(evt);
      console.log(activePoints);
      var url = "http://example.com/?grid[f][collor][]=" + activePoints[0].filter
      alert(url);
    }
  );
});

canvas {
  //height: 10vh; 
  width: 90vw;
  display: block;
}

.black {
  background-color: black;
  height: 100px;
  width: 100px;
}

.flip {
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /*border: 1px solid black;*/
  height: 100%;
  font: normal 14px helvetica, arial, san serif;
  padding: 10px;
  position: absolute;
  transform-origin: 50% 50% 0px;
  -moz-transform-origin: 50% 50% 0px;
  -ms-transform-origin: 50% 50% 0px;
  -o-transform-origin: 50% 50% 0px;
  -webkit-transform-origin: 50% 50% 0px;
  transition: all 3s;
  -moz-transition: all 3s;
  -ms-transition: all 3s;
  -o-transition: all 3s;
  -webkit-transition: all 3s;
}

#side-1 {
  transform: rotateY( 0deg);
  -moz-transform: rotateY( 0deg);
  -ms-transform: rotateY( 0deg);
  -o-transform: rotateY( 0deg);
  -webkit-transform: rotateY( 0deg);
}

#side-2 {
  transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -ms-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  -webkit-transform: rotateY( 180deg);
}

.flip-side-1 {
  transform: rotateY( 0deg) !important;
  -moz-transform: rotateY( 0deg) !important;
  -ms-transform: rotateY( 0deg) !important;
  -o-transform: rotateY( 0deg) !important;
  -webkit-transform: rotateY( 0deg) !important;
}

.flip-side-2 {
  transform: rotateY( 180deg) !important;
  -moz-transform: rotateY( 180deg) !important;
  -ms-transform: rotateY( 180deg) !important;
  -o-transform: rotateY( 180deg) !important;
  -webkit-transform: rotateY( 180deg) !important;
}

.separator {
  position: absolute;
  display: inline-block;
  left: 0;
  height: 100%;
  width: 25px;
  background: skyblue;
  z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<div id="side-1" class="flip">
  <span class="separator" id="shortcut"></span>
  <div class="vPadding black"></div>
</div>
<div id="side-2" class="flip">
  <span class="separator" id="budget"></span>
  <div class="vPadding">
    <canvas id="chart" width="400" height="400"></canvas>
  </div>
</div>

Answer 1

下面的内容诚然是一个丑陋的 hack，但也许它可能会完成您需要的，直到 Google 修复了 Chrome 浏览器中导致此问题的错误。

我基本上只是在翻转的顶部叠加了第二个动画，使 Canvas 在大约翻转的一半处消失。这最终不是进入 3 秒翻转的 1.5 秒，可能是因为翻转使用某种缓动函数使“中途”点出现在不同的时间。通过反复试验，我发现让 Canvas 在 0.9 秒后消失是可行的。但是请注意，我没有检查任何其他浏览器，它们可能使用不同的缓动函数。

我也不知道这是否能满足您在背景中显示适当内容、重新绘制屏幕等方面的需求。不过，希望它至少是您了解的一个起点更好地破解自己。

请注意，我无法从您的问题中判断您是希望 Canvas 开始隐藏还是开始可见。在创建图表的一开始就有动画这一事实向我表明 Canvas 应该开始可见。但是，将鼠标悬停在图表段上时文本的方向表明图表应该开始隐藏。

document.getElementById('shortcut').addEventListener('click', function(event) {
  event.preventDefault();
  document.getElementById('side-2').className = 'flip flip-side-1';
  document.getElementById('side-1').className = 'flip flip-side-2';
  document.getElementById('chart').className = 'canvas-appear';
  document.getElementById('chart').className = 'canvas-appear';
}, false);

document.getElementById('budget').addEventListener('click', function(event) {
  event.preventDefault();
  document.getElementById('side-2').className = 'flip';
  document.getElementById('side-1').className = 'flip';
  document.getElementById('chart').className = 'canvas-disappear';
  document.getElementById('chart').className = 'canvas-disappear';
}, false);

var data = [{
  value: 300,
  color: "#F7464A",
  highlight: "#FF5A5E",
  label: "Red"
  //filter: 1
}, {
  value: 50,
  color: "#46BFBD",
  highlight: "#5AD3D1",
  label: "Green"
  //filter: 2
}, {
  value: 100,
  color: "#FDB45C",
  highlight: "#FFC870",
  label: "Yellow"
  //filter: 3
}]

$(document).ready(function() {
  var ctx = $("#chart").get(0).getContext("2d");
  var chart = new Chart(ctx).Doughnut(data);

  var segments = chart.segments;
  for (var i = 0; i < segments.length; i++) {
    // Add properties in here like this
    segments[i].filter = i + 1;
  }

  $("#chart").click(
    function(evt) {
      var activePoints = chart.getSegmentsAtEvent(evt);
      console.log(activePoints);
      var url = "http://example.com/?grid[f][collor][]=" + activePoints[0].filter
      alert(url);
    }
  );
});

canvas {
  //height: 10vh; 
  width: 90vw;
  display: block;
}

.black {
  background-color: black;
  height: 100px;
  width: 100px;
}

.flip {
  backface-visibility: hidden;
  /*border: 1px solid black;*/
  height: 100%;
  font: normal 14px helvetica, arial, san serif;
  padding: 10px;
  position: absolute;
  transform-origin: 50% 50% 0px;
  transition: all 3s;
}

#side-1 {
  transform: rotateY( 0deg);
}

#side-2 {
  transform: rotateY( 180deg);
}

.flip-side-1 {
  transform: rotateY( 0deg) !important;
}

.flip-side-2 {
  transform: rotateY( 180deg) !important;
}

.separator {
  position: absolute;
  display: inline-block;
  left: 0;
  height: 100%;
  width: 25px;
  background: skyblue;
  z-index: 999;
}

#chart {
  visibility: hidden;
}

.canvas-disappear {
  animation: 0.75s disappear;
  animation-fill-mode: forwards;
}

@keyframes disappear {
  99% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}

.canvas-appear {
  animation: 0.9s appear;
  animation-fill-mode: forwards;
  visibility: hidden;
}

@keyframes appear {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<div id="side-1" class="flip">
  <span class="separator" id="shortcut"></span>
  <div class="vPadding black"></div>
</div>
<div id="side-2" class="flip">
  <span class="separator" id="budget"></span>
  <div class="vPadding">
    <canvas id="chart" width="400" height="400"></canvas>
  </div>
</div>