Question

大家好我有一个非常简单的人：

如何在转换后CSS属性（主要用于制作DIV形状）之前和之后消失。我正在为一个课堂上的项目工作，似乎无法弄明白。

该页面应该如下所示：

http://ista230.com/images/assignments/7/page2.jpg

以下是我对CSS的看法：

/* Navigation */

#nav{ 
    margin-bottom:2%; 
    margin-top:0%;
    width:100%; 
    background: #1d6287; 
} 

#nav ul { 
    padding: 100px 0 0; /* Remove default but add 40px to top */ 
    margin: 0; /* Remove default */ 
    list-style: none; 
    width: 100%; 
    overflow: hidden; /* So it 'contains' the floated <li> elements */ 
} 

#nav ul li {
    text-align:center;
    float: left; 
    min-height: 50px; 
    width: 20%; /* 6 items means 20% each */ 
    position: relative; 
}

#nav a { 
    text-decoration:none; 
    color:black; 
    display: block; 
    width: 100%; /* 100% of <li> */ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
}
div.navItem { 
    padding: 4% 4%; 
    position: relative;
    background: #D54D25;
    border: 2px solid #D54D25;
}
/* For little dumb triangle */
div.navItem:after, div.navItem:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 1px;
    width: 1px;
    position: absolute;
    pointer-events: none;
}

div.navItem:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #D54D25;
    border-width: 10px;
    left: 50%;
    margin-left: -30px;
}
div.navItem:before {
    border-color: rgba(213, 77, 37, 0);
    border-bottom-color: #D54D25;
    border-width: 26px;
    left: 40%;
    margin-left: -26px;
}
div.navItem{
    -moz-transition: height .5s ease; /* Firefox 4 */ 
    -webkit-transition: height .5s ease; /* Safari and Chrome */ 
    -o-transition: height .5s ease; /* Opera */ 
    -ms-transition: height .5s ease; /* IE9 (maybe) */ 
    transition:height .5s ease; 
}

.navItem:hover 
{ 

    background: #999; /* Old browsers */ 
    color:white;
    border:none;
    background: #999; 
    background-image: url("../images/logo.png") no-repeat center; /* fallback */ 
    background: url("../images/logo.png") no-repeat center, -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
    background: url("../images/logo.png")no-repeat center, -webkit-linear-gradient(top, #999, #FEFEFE); /* Chrome 10+, Saf5.1+ */ 
    background: url("../images/logo.png")no-repeat center, -moz-linear-gradient(top, #999, #FEFEFE); /* FF3.6+ */ 
    background: url("../images/logo.png")no-repeat center, -ms-linear-gradient(top, #999, #FEFEFE); /* IE10 */ 
    background: url("../images/logo.png")no-repeat center, -o-linear-gradient(top, #999, #FEFEFE); /* Opera 11.10+ */ 
    background: url("../images/logo.png")no-repeat center, linear-gradient(top, #999, #FEFEFE); /* W3C */
    height: 130px;
}

HTML：

 <nav id="nav">
       <ul>
            <li><a href="#"><div class="navItem">Home</div></a></li>
            <li><a href="#"><div class="navItem">Upcoming Flights</div></a></li>
            <li><a href="#"><div class="navItem">About Us</div></a></li>
            <li><a href="#"><div class="navItem">Travel Guide</div></a></li>
            <li><a href="#"><div class="navItem">Contact Us!</div></a></li>
        </ul>
   </nav>

Answer 1

如果你想要消失向上箭头，在悬停菜单项后你可以使用这个选择器：

div.navItem:hover:before{
    opacity:0;
}

此选择器适用于您的代码。我在您的代码中进行了一些更改，您可以在此处查看：jsFiddle

Answer 2

您可以使用jQuery来监听转换结束

jQuery(".navItem").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
   your function here;
});

See demo here http://jsfiddle.net/Godinall/Aq2SB/

使div形状在过渡后消失

2 个答案: