我在合并display: none
和display: flex
时遇到了问题。我知道对此有很多疑问。但是,我想分享一种特殊的方法。它不能完全满足我的需要,因为动画不兼容。这是我所做的:
navigation
)首先应具有display: none
,然后在切换时应具有display: flex
navi
后,将切换一个类(shown
),并在CSS中显示具有属性display: flex
的属性,以及另一个用于空间布置的属性这是一个最小的示例:
$(document).ready(function() {
$(".navi").click(function() {
$(".navi .fa-chevron-down").toggleClass("rotate180");
$(".navigation").toggleClass("shown")
});
});
:root {
--bg: mistyrose;
--accent-light: #f67e7d;
--accent-dark: #A94645;
--accent-cont: #fff;
--text: #371C1C;
}
body {
background: var(--bg);
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
color: var(--text);
font-size: 0.8em;
}
/* Navigation */
.navi {
cursor: pointer;
position: fixed;
top: calc(10px + 7vh);
left: 7vw;
width: 14vw;
min-width: 160px;
line-height: 30px;
border-radius: 5px;
overflow: hidden;
background: var(--accent-light);
text-align: center;
}
.navi i {
margin-left: 4.5vw;
line-height: 30px;
}
.navi .fa-chevron-down {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.rotate180 {
transform: rotate(180deg);
}
.navigation {
position: absolute;
top: calc(30px + 12vh);
left: 7vw;
width: 14vw;
min-width: 160px;
height: 24vh;
min-height: 200px;
border-radius: 5px;
background: var(--accent-light);
display: none;
}
.shown {
display: flex;
flex-wrap: wrap;
}
.navigation a {
text-decoration: none;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.navigation span {
color: var(--accent-cont);
text-align: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.navigation a:hover i {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
color: var(--accent-cont) !important;
}
.navigation a:hover span {
color: var(--text);
}
.navigation i {
display: block;
color: var(--text) !important;
font-size: 20px;
margin: 0px 10px -10px 10px;
padding: 5px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<!--Navigation-->
<div class="navigation">
<a href="{text:Link One Url}"><i class="fa fa-user-circle"></i><span>About</span></a>
<a href="{text:Link Two Url}"><i class="fa fa-question-circle"></i><span>Answers</span></a>
<a href="{text:Link Nine Url}"><i class="fa fa-folder-open-o"></i><span>Files</span></a>
<a href="{text:Link Three Url}"><i class="fa fa-star"></i><span>Favorites</span></a>
<a href="{text:Link Four Url}"><i class="fa fa-film"></i><span>Movies</span></a>
<a href="{text:Link Eight Url}"><i class="fa fa-link"></i><span>Links</span></a>
<a href="{text:Twitter url}" target="_blank"><i class="fa fa-twitter-square"></i><span>Twitter</span></a>
<a href="{text:Instagram url}" target="_blank"><i class="fa fa-instagram"></i><span>Instagram</span></a>
<a href="{text:Youtube url}" target="_blank"><i class="fa fa-youtube"></i><span>Youtube</span></a>
</div>
<!--End Navigation-->
</body>
here是一个jsfiddle,如果更简单的话。
所以我要问的是这可能是替代方法吗?我尝试过放置hidden属性,但是它没有任何作用,先切换,然后将显示从块更改为flex,但是在磁贴等方面看起来是错误的。如果您有其他解决方案,我很乐意听到了,谢谢!