joel.jdesignera pro asked 5 years ago


There seems to be some sort of bug with the animation. Upon click Next, it will animate from Step 1 to Step 2. And If I were to dismiss the modal on Step 2 and retry from Step 1, the animation on Step 2 gets fired automatically. I have tried with .show() and .hide() instead, and it's working as intended without animation though. I am on MDB Pro 4.3.2. .js

    // Resets Forgot Password on modal dismiss
    $('#login-reg-fgtpass').on('hidden.bs.modal', function() {
        $('form#f-email-form')[0].reset();
        $('form#f-code-form')[0].reset();
        $('form#f-pass-form')[0].reset();
        $('#fgtpass-step-1').show();
        $('#fgtpass-step-2').hide();
        $('#fgtpass-step-3').hide();
        $('#fgtpass-step-1').removeClass('animated fadeOutLeft');
        $('#fgtpass-step-2').removeClass('animated fadeOutLeft fadeInRight');
        $('#fgtpass-step-3').removeClass('animated fadeOutLeft fadeInRight');
    });

    // Forgot Password Step 1
    $('form#f-email-form').submit(function(e) {
        e.preventDefault();

        var result = $('form#f-email-form').serialize();
        console.log('step 1');

        $('div#f-pass-step-1-loader').fadeIn(350);

        $.ajax({
            type: 'POST',
            url: 'assets/php/forgotPass.php',
            data: result,
            dataType: 'json',
            success: function(data) {
                console.log(data); // Debugging Purpose

                if (data == 'email-empty') {
                    toastr.warning('Empty email field');
                }
                else if (data == 'email-fail') {
                    toastr.error('Wrong email format');
                }
                else if (data == 'email-none') {
                    toastr.error('Email not registered');
                }
                else if (data == 'email-pass') {
                    toastr.success('Check your email');

                    $('#fgtpass-step-1').addClass('animated fadeOutLeft').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                        $('#fgtpass-step-1').hide();
                        $('#fgtpass-step-2').show();
                        $('#fgtpass-step-2').addClass('animated fadeInRight');
                        $('#fgtpass-step-1').removeClass('animated fadeOutLeft');
                    });
                }

                $('div#f-pass-step-1-loader').fadeOut(350);
            }
        });
    });

    // Forgot Password Step 2 (Resend)
    $('button#f-code-btn-re').on('click', function() {
        var result = $('form#f-email-form').serialize();

        $('div#f-pass-step-2-loader').fadeIn(350);

        $.ajax({
            type: 'POST',
            url: 'assets/php/forgotPass.php',
            data: result,
            dataType: 'json',
            success: function(data) {
                //console.log(data); // Debugging Purpose

                if (data == 'email-pass') {
                    toastr.success('Check your email');
                }
                else {
                    //Dismiss modal
                }

                $('div#f-pass-step-2-loader').fadeOut(350);
            }
        });
    });

    // Forgot Password Step 2
    $('form#f-code-form').submit(function(e) {
        e.preventDefault();

        var result = $('form#f-code-form, form#f-email-form').serialize();

        console.log('step 2');

        $.ajax({
            type: 'POST',
            url: 'assets/php/forgotPass.php',
            data: result,
            dataType: 'json',
            success: function(data) {
                console.log(data); // Debugging Purpose

                if (data == 'code-min-max') {
                    toastr.error('Verification code has to be 4 characeters');
                }
                else if (data == 'code-fail') {
                    toastr.error('Wrong verification code');
                }
                else if (data == 'code-pass') {
                    toastr.success('Verification code matched');

                    $('#fgtpass-step-2').addClass('animated fadeOutLeft').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                        $('#fgtpass-step-2').hide();
                        $('#fgtpass-step-3').show();

                        $('#fgtpass-step-3').addClass('animated fadeInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                            $('#fgtpass-step-3').removeClass('animated fadeInRight');
                        });

                        $('#fgtpass-step-2').removeClass('animated fadeOutLeft fadeInRight');
                    });
                }
            }
        });
    });
.html

<!DOCTYPE html>
<!-- Modal -->
<div id="login-reg-fgtpass" class="modal fade animated pulse" tabindex="-1" role="dialog">
    <div class="modal-dialog cascading-modal" role="document">
        <!-- Content -->
        <div class="modal-content">
            <!-- Modal Cascading Tabs -->
            <div class="modal-c-tabs">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs tabs-3 blue darken-1" role="tablist">
                    <li class="nav-item">
                        <a id="tab-login" class="nav-link active" data-toggle="tab" href="#panel-login" role="tab"><i class="fa fa-sign-in mr-1"></i> Login</a>
                    </li>
                    <li class="nav-item">
                        <a id="tab-reg" class="nav-link" data-toggle="tab" href="#panel-reg" role="tab"><i class="fa fa-user-plus mr-1"></i> Register</a>
                    </li>
                    <li class="nav-item">
                        <a id="tab-fgtpass" class="nav-link" data-toggle="tab" href="#panel-fgtpass" role="tab"><i class="fa fa-question-circle mr-1"></i> Forgot Password</a>
                    </li>
                </ul>
            </div>

            <!-- Tab panels -->
            <div class="tab-content">
                <!--Panel Login-->
                <div id="panel-login" class="tab-pane fade in show active" role="tabpanel">
                    <form id="loginForm" method="post">
                        <!-- Body -->
                        <div class="modal-body mb-1">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input id="l-email" name="l-email" type="text" class="form-control">
                                <label for="l-email">Email</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-lock prefix"></i>
                                <input id="l-pass" name="l-pass" type="password" length="32" class="form-control">
                                <label for="l-pass" required>Password</label>
                            </div>
                            <div class="text-center mt-2">
                                <button id="l-btn" type="submit" class="btn btn-secondary">Log in</button>
                            </div>
                        </div>
                        <!-- Footer -->
                        <div class="modal-footer display-footer">
                            <div class="options text-center text-md-left mt-1">
                                <p>
                                    <a id="a-fgtpass" class="blue-text">Forgot Password?</a><br/>
                                    Don't have an account?
                                    <a id="a-reg" class="blue-text" data-toggle="tab" href="#panel-reg">Register</a>
                                </p>
                            </div>

                            <button class="btn btn-outline-danger btn-rounded waves-effect ml-auto" type="button" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></button>
                        </div>
                    </form>
                </div>
                <!-- /.Panel Login -->

                <!-- Panel Register -->
                <div id="panel-reg" class="tab-pane fade" role="tabpanel">
                    <form id="regForm" method="post">
                        <!-- Body -->
                        <div class="modal-body">
                            <div class="md-form form-sm">
                                <i class="fa fa-envelope prefix"></i>
                                <input id="r-email" name="r-email" type="text" maxlength="255" class="form-control">
                                <label for="r-email">Email</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-user prefix"></i>
                                <input id="r-name" name="r-name" type="text" class="form-control">
                                <label for="r-name">Name</label>
                            </div>

                            <div class="md-form form-sm">
                                <i class="fa fa-lock prefix"></i>
                                <input id="r-pass" name="r-pass" type="password" length="32" class="form-control" >
                                <label for="r-pass">Password</label>
                            </div>

                            <div class="text-center form-sm mt-2">
                                <button id="r-btn" type="submit" class="btn teal">Register</button>
                            </div>

                            <div class="text-center red-text">
                                *<small>Organisation do not require an account to hire freelancers.</small>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="modal-footer">
                            <div class="options text-md-left">
                                <p class="pt-1">
                                    Already have an account?
                                    <a id="a-login" class="blue-text" data-toggle="tab" href="#panel-login">Log In</a>
                                </p>
                            </div>

                            <button class="btn btn-outline-danger btn-rounded waves-effect ml-auto" type="button" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></button>
                        </div>
                    </form>
                </div>
                <!-- /.Panel Register -->

                <!-- Panel Forgot Password -->
                <div id="panel-fgtpass" class="tab-pane fade" role="tabpanel">
                    <!-- Body -->
                    <!-- fgtpass-step-1 -->
                    <div id="fgtpass-step-1">
                        <form id="f-email-form" type="post">
                            <div class="modal-body">
                                <div class="md-form form-sm">
                                    <i class="fa fa-envelope prefix"></i>
                                    <input id="f-email" name="f-email" type="text" class="form-control">
                                    <label for="f-email" required>Email</label>
                                </div>

                                <div id="f-pass-step-1-loader" class="progress primary-color" style="display: none;">
                                    <div class="indeterminate"></div>
                                </div>

                                <div class="text-center form-sm mt-2">
                                    <button id="f-email-btn" type="submit" class="btn btn-secondary">Next <i class="fa fa-angle-double-right ml-1"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.fgtpass-step-1 -->

                    <!-- fgtpass-step-2 -->
                    <div id="fgtpass-step-2">
                        <form id="f-code-form" type="post">
                            <div class="modal-body">
                                <div class="md-form form-sm">
                                    <i class="fa fa-unlock-alt prefix"></i>
                                    <input id="f-code" name="f-code" type="password" class="form-control">
                                    <label for="f-code" required>Verification Code</label>
                                </div>

                                <div id="f-pass-step-2-loader" class="progress primary-color" style="display: none;">
                                    <div class="indeterminate"></div>
                                </div>

                                <div class="text-center form-sm mt-2">
                                    <div class="row">
                                        <div class="col-lg-4 offset-lg-4">
                                            <button id="f-code-btn" type="submit" class="btn teal">Verify <i class="fa fa-angle-double-right ml-1"></i></button>
                                        </div>

                                        <div class="col-lg-4">
                                            <button id="f-code-btn-re" type="reset" class="btn btn-danger">Resend <i class="fa fa-repeat ml-1"></i></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.fgtpass-step-2 -->

                    <!-- fgtpass-step-3 -->
                    <div id="fgtpass-step-3">
                        <form id="f-pass-form" type="post">
                            <div class="modal-body">
                                <div class="md-form form-sm">
                                    <i class="fa fa-key prefix"></i>
                                    <input id="f-pass" name="f-pass" type="password" class="form-control">
                                    <label for="f-pass" required>New Password</label>
                                </div>

                                <div class="text-center form-sm mt-2">
                                    <button id="f-pass-btn" type="submit" class="btn red">Change Password <i class="fa fa-check ml-1"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.fgtpass-step-3 -->

                    <!-- Footer -->
                    <div class="modal-footer">
                        <div class="options text-md-left">
                            <p class="pt-1">
                                Don't have an account?
                                <a id="a-reg2" class="blue-text" data-toggle="tab" href="#panel-reg">Register</a>
                            </p>
                        </div>

                        <button class="btn btn-outline-danger btn-rounded waves-effect ml-auto" type="button" data-dismiss="modal">Close <i class="fa fa-times-circle ml-1"></i></button>
                    </div>
                </div>
                <!-- /.Panel Forgot Password -->
            </div>
        </div>
        <!-- /.Modal Content -->
    </div>
</div>
<!-- /.Modal -->

joel.jdesignera pro answered 5 years ago


I found the solution to it on animate.css GitHub instead. Read More At: animate.css issue thread Apparently, the issue is with most new browsers is reacting to both webkitAnimationEnd and animationend at the same time, therefore it got fired twice. The solution provided was to use:

var animationEnd = (function(el) {
        var animations = {
            "animation": "animationend",
            "OAnimation": "oAnimationEnd",
            "MozAnimation": "mozAnimationEnd",
           "WebkitAnimation": "webkitAnimationEnd"
        }

        for(var t in animations) {
            if(el.style[t] !== undefined) {
                return animations[t];
            }
        }
})(document.createElement("fakeelement"));
Follow by:

$('#id').one(animationEnd, function() {
    //Do code
});


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No