Transitions cannot be changed

[vfreriks]

I am trying to change the transition on one of the code examples provided in the docs. However; the transition for changing values is always the crossfade transition when I view the output in the browser.

This is the markup I am using:

<script src="js/tick.view.swap.global.min.js"></script>
<script src="js/tick.core.kickstart.min.js"></script>
<div class="tick"
     data-value="1234"
     data-style="transition-in:
        scale(.8, 1) .75s ease-out-bounce .5s,
        fade(0, 1) .25s .5s;

      transition-out:
        fade(1, 0) .5s"
     data-did-init="setupFlip">
    <div data-repeat="true">
        <span data-view="swap"></span>
    </div>
</div>

<script>
    function setupFlip(tick) {
        Tick.helper.interval(function() {
            tick.value++;
        }, 1000);
    }
</script>