CSS-переход не работает с видимостью: скрыто

Question

CSS-переход не работает с видимостью: скрыто

0

У меня есть страница html/css/javascript, которая отлично работает, за исключением первого раза. В принципе, divLUMProvideZipCode начинается со hidden класса, но когда вы нажимаете кнопку, он станет видимым. Проблема в том, что она не исчезает так, как должна, она появляется сразу, без какого-либо перехода. После этого он работает отлично, но, скорее всего, пользователь будет нажимать кнопку один раз, дважды на вершине, чтобы получить эффект, он должен работать в первый раз. У кого-нибудь есть идеи?

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Leads User Maintenance</title>
<link rel="stylesheet" type="text/css" href="LeadsMaintenance.css"/>
<script>
    function changeClass() { 
        var doc = document.getElementById("divLUMProvideZipCode");
        if (doc.className.indexOf("hidden") >= 0)
        {
            doc.className = "visible solidShadowBox";               
        }
        else
        {
            doc.className = "hidden";               
        }
    };
</script>
</head>

<body>

<div class="centeredBodyWrapper">
    <div id="divLUMNavigation" class="solidShadowBox">
        <button onClick="changeClass()">Show Me</button>
    </div>

    <div id="divLUMUserSelect" class="solidShadowBox">

    </div>

    <div id="divLUMUserInformation" class="solidShadowBox">
        <div id="divLUMProvideZipCode" class="hidden solidShadowBox">
        </div>
    </div>
</div>

</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
.centeredBodyWrapper {
    margin: auto;
    width: 960px;
}
#divLUMNavigation {
    width: 100%;
    height: 50px;
    margin: 10px 10px 10px 10px;
    padding: 5px 5px 5px 5px;
    position: relative;
    top: 0px;
    left: 0px;
}
#divLUMUserSelect {
    width: 100%;
    height: 50px;
    margin: 10px 10px 10px 10px;
    padding: 5px 5px 5px 5px;
    position: relative;
    top: 0px;
    left: 0px;
}
#divLUMUserInformation {
    width: 100%;
    height: 640px;
    margin: 10px 10px 10px 10px;
    padding: 5px 5px 5px 5px;
    position: relative;
    top: 0px;
    left: 0px;
}
    #divLUMProvideZipCode {
        width: 200px;
        height: 350px;
        margin: 10px 10px 10px 10px;
        padding: 5px 5px 5px 5px;
        position: relative;
        top: 0px;
        left: 0px;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        ms-transition: all 1s;
        transition: all 1s;
    }
.solidShadowBox {
    -webkit-box-shadow: 0px 0px 8px 0px #909090;
    -moz-box-shadow: 0px 0px 8px 0px #909090;
    -o-box-shadow: 0px 0px 8px 0px #909090;
    -ms-box-shadow: 0px 0px 8px 0px #909090;
    box-shadow: 0px 0px 8px 0px #909090;

}
.hidden {
    visibility: hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    ms-transition: all 1s;
    transition: all 1s;
}
.visible {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    ms-transition: all 1s;
    transition: all 1s;
    visibility: visible
}

Volearix 09 май 2014, в 15:36

Источник

0

здесь ничего не происходит: jsfiddle.net/eCLbs
valerio0999 09 май 2014, в 12:47
0

Не уверен, почему это так, но теперь он работает с Opacity: 0/1 .
Volearix 09 май 2014, в 12:56

Теги:

javascript

jquery

html

css

html5

2 ответа

0

.hidden {height: 1px; overflow:hidden; переполнение: скрытый; opacity:0;}.visible { height:auto; opacity: 0;}.visible {height: auto; opacity:1; Непрозрачность: 1; overflow:visible; Переполнение: видимый; } }

Попробуй это.

Grant Briston 09 май 2014, в 11:29

Ещё вопросы

здесь ничего не происходит: jsfiddle.net/eCLbs
Не уверен, почему это так, но теперь он работает с Opacity: 0/1 .

Johan Kvint · Accepted Answer · 2014-05-09T10-55-00.000Z

Попробуйте использовать непрозрачность: 0 в вашем скрытом классе и непрозрачность: 1 в вашем видимом классе, который требует перехода на видимость

к элементу видимости не применяются эффекты перехода jsfiddle.net/v2N7v/1