index.html


<!DOCTYPE html>
<html>
<head>
  <title>vue-animate-transitions</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="dist/vue-animate-transitions.min.css">

  <script src="https://unpkg.com/vue@2.0.5/dist/vue.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <link rel="import" id="template" href="demo-template.html">

  <style type="text/css">
    body {
      padding: 50px;
    }

    .trans-item {
      background-color: tomato;
      padding: 20px;
      color: white;
      border-radius: 10px;
    }

    pre {
      background-color: white;
      font-family: Monaco;
    }
  </style>
</head>
<body>

<a href="https://github.com/dperrymorrow/vue-animate-transitions"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>

<div id="demo" class="container">
<!-- vue renders here... -->
</div>

<script>
    var data, template;

    $.getJSON('src/transitions.json').then(function (response) {
      data = response;
      return $.get('demo-template.html')
    }).then(start);


    function start(template) {

      new Vue({
        show: false,
        el: '#demo',
        data: {
          transition: data[0].in,
          transitions: data,
          show: false
        },

        template: template,

        computed: {
          label: function () {
            return this.show ? "Trans Out" : "Trans In";
          }
        },
        methods: {
          toggle: function () {
            this.show = !this.show;
          }
        }
      });

    }

</script>

</body>
</html>