Customizing Animation

You can change how the wijflipcard flips using the animation option. Set the type attribute of the animation option, to customize how to flip the wijflipcard from the front to the back panel. Some other related animation attributes are listed below:

Direction: Flip the wijflipcard in Horizontal or Vertical direction. For further information, please see Change Flip Direction.
Duration: Change the amount of time it takes to flip the card. By default the value is set to 500 milliseconds.
Disabled: Display the back panel of the card without any animation by setting this property as True. By default, this property is set False.

Type: Flip card provides the following animation types:

scroll
blind
bounce
clip
drop
explode
fade
fold

highlight
puff
pulsate
scale
shake
size
slide

In Source View

Complete the following steps:

Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following reference within the <head></head> tags:

                        
    <!--RequireJs-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
    <script type="text/javascript">
        requirejs.config({
            baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
        });
    </script>

Add the following script between the <head></head> tags to initialize the widget and change its animation duration and type:

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijflipcard"], function () {
        $(document).ready(function () {
            $("#flipcard1").wijflipcard({
                animation: {
                    duration:2000,
                    type: "bounce"
                }
            });
        });
    });
</script>

Add the following markup within the <body></body> tags of the page, just after @RenderBody() to create the wijflipcard:

<div id="flipcard1">
    <div><center>
        <br />
        <img src="http://wijmo.com/img/wijmo.png"><br />
        This is the frontPanel.
    </center></div>
    <div><center>
        <br /><br />
        <br /><br />
        This is the backPanel.
    </center></div>
</div>

Press F5 to run the project.