Animate wijdialog

The wijdialog widget supports animation. See the Dialog > Animation sample of the Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/dialog/Animation .

Create an C1 ASP.NET MVC 5 Web Application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page.

<div>
      <div id="dialog" title="Basic dialog">
            <p>
                Look what I can do!</p>
        </div>
    </div>

Add the following script to initialize the widget and add animation:

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            /$(":wijmo-wijdialog").wijdialog("destroy").remove();
            $('#dialog').wijdialog({
                autoOpen: true,
                show: 'blind',
                hide: 'explode',
                collapsingAnimation: { animated: "puff", duration: 300, easing: "easeOutExpo" },
                expandingAnimation: { animated: "bounce", duration: 300, easing: "easeOutExpo" },
                width: 500
            });
            $('#expandEffectTypes').change(function () {
                var ee = $("#expandEffectTypes option:selected").val();
                $("#dialog").wijdialog("option", "expandingAnimation", { effect: ee, duration: 500 });
            });
            $('#collapseEffectTypes').change(function () {
                var ce = $("#collapseEffectTypes option:selected").val();
                $("#dialog").wijdialog("option", "collapsingAnimation", { effect: ce, duration: 500 });
            })
            $('#showEffectTypes').change(function () {
                var ee = $("#showEffectTypes option:selected").val();
                $("#dialog").wijdialog("option", "show", ee);
            });
            $('#hideEffectTypes').change(function () {
                var ce = $("#hideEffectTypes option:selected").val();
                $("#dialog").wijdialog("option", "hide", ce);
            })
        });
</script>

Run the application to see the animation effects .