在div中翻动动画而不是隐藏画布。预期的行为是隐藏画布

Question

Demo

我希望有一个可以来回翻转的div。我的第一个div可以包含任何内容我的第二个包含使用chart.js的画布。我想翻转这两个div，我想隐藏另一个点击页面最左边的按钮。

问题是罐头不会隐藏只是翻转。但如果画布是当前页面，则另一个是隐藏的。如果另一方是当前的div，那么画布只会在另一侧翻转。

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下无疑是一个丑陋的黑客攻击，但或许它可能会完成您所需要的工作，直到Google首先修复导致此问题的Chrome浏览器中的错误。

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

我也不知道这是否会在背景中显示适当的东西，重新绘制屏幕等方面达到你所需要的水平。但是，希望它可能至少是你弄清楚的起点一个更好的黑客自己。

请注意，我无法从您的问题中判断您是否希望画布开始隐藏或开始可见。创建图表时最初有动画的事实告诉我画布应该开始可见。但是，鼠标悬停在图表段上时文本的方向表明图表应该开始隐藏。

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>