CSS Transitions
The Popup control's fadeIn and fadeOut properties add simple animations when the Popup is shown or hidden.
You can create your own custom CSS-based animations by adding and removing classes to the Popup's host element in response to the shown and hiding events, and defining CSS rules that apply animations based on those classes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | // This file locates: "Scripts/Lesson/C1Input/Transitions.js".c1.documentReady(function () { var frmLogin = wijmo.Control.getControl('#frmLogin'); var frmCreateAccount = wijmo.Control.getControl('#frmCreateAccount'); var frmEditAccount = wijmo.Control.getControl('#frmEditAccount'); initDialog(frmLogin); initDialog(frmCreateAccount); initDialog(frmEditAccount); // init dialogs with transition effects function initDialog(dlg) { var host = dlg.hostElement; dlg.fadeIn = false; // disable standard animation effect dlg.shown.addHandler(function (s, e) { wijmo.toggleClass(host, 'custom-animation-visible', true); }); dlg.hiding.addHandler(function (s, e) { wijmo.toggleClass(host, 'custom-animation-visible', false); }); wijmo.toggleClass(host, 'custom-animation', true); } // show forms document.getElementById('btnLogin').addEventListener('click', function () { frmLogin.show(true, function (sender) { switch (sender.dialogResult) { case 'submit': alert('form submitted'); break; case 'wj-hide-create': btnCreateAccount.click(); // open the Create Account form break; } }); }); document.getElementById('btnCreateAccount').addEventListener('click', function () { frmCreateAccount.show(true, function (sender) { if (sender.dialogResult == 'submit') { alert('form submitted'); } }); }); document.getElementById('btnEditAccount').addEventListener('click', function () { frmEditAccount.show(true, function (sender) { if (sender.dialogResult == 'submit') { alert('form submitted'); } }); }); // validate the form but don't submit document.body.addEventListener('submit', function (e) { e.preventDefault(); // don't submit if (e.target.checkValidity()) { var dlg = wijmo.Control.getControl(e.target); dlg.hide('submit'); // close the dialog passing a dialogResult } }); // validate password/new password confirmation ensureSameValue('password', 'confirm'); ensureSameValue('newPassword', 'newConfirm'); function ensureSameValue(f1, f2) { var inputs = [document.getElementById(f1), document.getElementById(f2)]; inputs.forEach(function (input) { input.addEventListener('input', function (e) { var err = inputs[0].value != inputs[1].value ? 'Passwords don\'t match.' : ''; inputs[1].setCustomValidity(err); }); }) }}); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // This file locates: "Content/css/Lesson/C1Input/Transitions.css"..modal-body { min-width: 300px;}input:invalid { border-color: red;}/* CSS animations for fading in and out */.custom-animation { opacity: 0; transform: rotate3d(1, .5, .5, 180deg) scale(0.1); transition: all ease-in .4s;}.custom-animation-visible { opacity: 1; transform: none;}label{ padding:0px;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1InputController : Controller { // GET: Transitions public ActionResult Transitions() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <h1> @Html.Raw(Resources.C1Input.Transitions_Title)</h1><p> @Html.Raw(Resources.C1Input.Transitions_Text1)</p><p> @Html.Raw(Resources.C1Input.Transitions_Text2)</p><button id="btnLogin" class="btn btn-primary"> @Html.Raw(Resources.C1Input.Dialogs_Text5)</button><button id="btnCreateAccount" class="btn btn-primary"> @Html.Raw(Resources.C1Input.Dialogs_Text6)</button><button id="btnEditAccount" class="btn btn-primary"> @Html.Raw(Resources.C1Input.Dialogs_Text7)</button><!-- Log In form --><form id="frmLogin"> <h4 class="modal-header"> @Html.Raw(Resources.C1Input.Dialogs_Text5) <button type="button" tabindex="-1" class="close wj-hide">×</button> </h4> <div class="modal-body"> <label> @Html.Raw(Resources.C1Input.Dialogs_Text8) <input class="form-control" required type="email" /> </label> <label> @Html.Raw(Resources.C1Input.Dialogs_Text9) <input class="form-control" type="password" required pattern=".{4,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 4)" /> </label> <label> @Html.Raw(Resources.C1Input.Dialogs_Text10) <input type="checkbox" /> </label> <a href="" class="wj-hide-create">@Html.Raw(Resources.C1Input.Dialogs_Text11)</a> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> @Html.Raw(Resources.C1Input.Dialogs_Text5) </button> </div></form><!-- Create Account form --><form id="frmCreateAccount"> <h4 class="modal-header"> @Html.Raw(Resources.C1Input.Dialogs_Text6) <button type="button" tabindex="-1" class="close wj-hide">×</button> </h4> <div class="modal-body"> <label> @Html.Raw(Resources.C1Input.Dialogs_Text12) <input id="name" class="form-control" required pattern=".{2,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 2)" /> </label> <label> @Html.Raw(Resources.C1Input.Dialogs_Text8) <input id="email" class="form-control" type="email" required /> </label> <label> @Html.Raw(Resources.C1Input.Dialogs_Text9) <input id="password" class="form-control" type="password" required pattern=".{4,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 4)" /> </label> <label> @Html.Raw(Resources.C1Input.Dialogs_Text13) <input id="confirm" class="form-control" type="password" /> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> @Html.Raw(Resources.C1Input.Dialogs_Text6) </button> </div></form><!-- Edit Account form --><form id="frmEditAccount"> <h4 class="modal-header"> @Html.Raw(Resources.C1Input.Dialogs_Text7) <button type="button" tabindex="-1" class="close wj-hide">×</button> </h4> <div class="modal-body"> <label> @Html.Raw(Resources.C1Input.Dialogs_Text8) <input id="email" class="form-control" required type="email" /> </label> <label> @Html.Raw(Resources.C1Input.Dialogs_Text14) <input id="password" class="form-control" type="password" required pattern=".{4,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 4)" /> </label> <label> @Html.Raw(Resources.C1Input.Dialogs_Text15) <input id="newName" class="form-control" required pattern=".{2,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 2)" /> </label> <label> @Html.Raw(Resources.C1Input.Dialogs_Text16) <input id="newPassword" class="form-control" type="password" required pattern=".{4,}" title="@string.Format(Resources.C1Input.Dialogs_Text19, 4)" /> </label> <label> @Html.Raw(Resources.C1Input.Dialogs_Text17) <input id="newConfirm" class="form-control" type="password" /> </label> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit"> @Html.Raw(Resources.C1Input.Dialogs_Text18) </button> </div></form>@Html.C1().Popup("#frmLogin")@Html.C1().Popup("#frmCreateAccount")@Html.C1().Popup("#frmEditAccount") |