Remove From My Forums

Elements disappear when using CSS transition

Question
0

Sign in to vote

Hi I'm encountering this problem, When I trigger an CSS opacity transition effect on an element it causes another to disappear.

Have a look as this code, when the event handler fires resetPasswordButton disappears, when I then mouseover where it was it re-appears.

here's my code from my windows 8 store app:

----------------------------------- javascript ----------------------------------------

app.onready = function (args){

document.getElementById('loginButton').addEventListener("click", doAnimation);

};

function doAnimation()

{

var target = document.getElementById('loader');

loader.style.opacity = "1";

var message = document.getElementById('errorMessage');

message.innerText = "error message";

message.style.opacity = "1";

}

-------------------------------------- HTML -------------------------------------------

<div id="Buttons">

<div id="errorMessage"></div>

<div id="loginButtons">

<button id="loginButton" type="submit" value="submit" >LOG IN</button>

<div id="loader">

<progress class="win-ring"></progress>

</div>

<button id="resetPasswordButton" type="button">RESET PASSWORD</button>

</div>

</div>

-------------------------------------- CSS ---------------------------------------------

#login {

display: -ms-grid;

-ms-grid-row: 2;

-ms-grid-column: 2;

-ms-grid-rows: 30px 87px 1fr;

}

#loginTitle {

-ms-grid-row: 1;

}

#inputBoxes {

-ms-grid-row: 2;

}

#inputBoxes input {

border: 0px;

width: 250px;

}

#errorMessage {

font-size: 12px;

margin-

margin-bottom: 10px;

transition: opacity 1s;

opacity:0;

}

#Buttons

{

-ms-grid-row: 3;

}

#loginButtons {

margin: 6.67px 0px 0px;

display: -ms-grid;

-ms-grid-columns: 89fr 27fr 144fr;

-ms-grid-rows:31px 20px;

}

Monday, October 29, 2012 11:02 AM

Answers

Hi,

I reproduce your code, and find there maybe has some problem, please check:

<!DOCTYPE html>
<html>
<head>
    <title>flyout example</title>
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ListViewExample references -->
    <script type="text/javascript" src="/buttonclick/script.js"></script>
    <style type="text/css">
        #login {
            display: -ms-grid;
            -ms-grid-row: 2;
            -ms-grid-column: 2;
            -ms-grid-rows: 30px 87px 1fr;
        }


        #loginTitle {
            -ms-grid-row: 1;
        }


        #inputBoxes {
            -ms-grid-row: 2;
        }


            #inputBoxes input {
                border: 0px;
                width: 250px;
            }


        #errorMessage {
            font-size: 12px;
            margin- margin-bottom: 10px;
            transition: opacity 1s;
            opacity: 0;
        }


        #Buttons {
            -ms-grid-row: 3;
        }


        #loginButtons {
            margin: 6.67px 0px 0px;
            display: -ms-grid;
            -ms-grid-columns: 89fr 27fr 144fr;
            -ms-grid-rows: 31px 20px;
        }
    </style>
</head>
<body>
    <div id="Buttons">

        <div id="errorMessage"></div>

        <div id="loginButtons">

            <button id="loginButton" type="submit" value="submit">LOG IN</button>

            <div id="loader">

                <progress class="win-ring"></progress>

            </div>

            <button id="resetPasswordButton" type="button">RESET PASSWORD</button>

        </div>

    </div>
    </body>
</html>

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function completed() {
                // addEventListener
                document.getElementById('loginButton').addEventListener("click", doAnimation);

            }));
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };
    function doAnimation() {

        var target = document.getElementById('loader');

        loader.style.opacity = "1";


        var message = document.getElementById('errorMessage');

        message.innerText = "error message";

        message.style.opacity = "1";

    }
    
    app.start();
})();

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework

Marked as answer by Song Tian Thursday, November 1, 2012 2:29 AM

Tuesday, October 30, 2012 3:05 AM

All replies

Hi,