wijmo.animate - C1 ASP.NET MVC

// This file locates: "Scripts/Lesson/C1Mvc/WijmoAnimate.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // animate grid when user clicks the button
    document.getElementById('btnAnimate').addEventListener('click', function () {
        wijmo.animate(function (pct) {
 
            // calculate transform for given percent (zero to one)
            var xform = '';
            if (pct < 1) {
                if (pct > .5) pct = pct - 1;
                xform = 'rotateY( ' + (pct * 180) + 'deg)';
            }
 
            // apply the transform to the grid element
            theGrid.hostElement.style.transform = xform;
        }, 2000); // animate for two seconds
    })
});

// This file locates: "Content/css/Lesson/C1Mvc/WijmoAnimate.css".
.demo-control{
    perspective: 1000px;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: WijmoAnimate
        public ActionResult WijmoAnimate()
        {
            return View(Models.FlexGridData.GetSales(100));
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Mvc.WijmoAnimate_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.WijmoAnimate_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.WijmoAnimate_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.WijmoAnimate_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.WijmoAnimate_Text4)
</p>
<p>
    <button class="btn btn-default" id="btnAnimate">
        @Html.Raw(Resources.C1Mvc.WijmoAnimate_Text5)
    </button>
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(250)

The wijmo.animate Method