title: flipping animation in div not hiding canvas. Expected behavior is hide canvas
body: <p><a href="http://jsfiddle.net/guradio/pcds6xj3/" rel="nofollow noreferrer">Demo</a></p>
  
  <p>I want to have a div that can be flipped back and forth. My first div can contain anything. My second contains a canvas using <code>chart.js</code>. I want to flip these two div and I want to hide the other on click of a button on the left most part of the page.</p>
  
  <p>Problem is that cans is not hiding just flipping. But the other is hidden if the canvas is the current page. While the canvas just flip on the other side if the other is the current div.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; 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);
      }
    );
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"&gt;&lt;/script&gt;
  &lt;div id="side-1" class="flip"&gt;
    &lt;span class="separator" id="shortcut"&gt;&lt;/span&gt;
    &lt;div class="vPadding black"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="side-2" class="flip"&gt;
    &lt;span class="separator" id="budget"&gt;&lt;/span&gt;
    &lt;div class="vPadding"&gt;
      &lt;canvas id="chart" width="400" height="400"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>