У меня была проблема с объединением display: none и display: flex. Я знаю, что есть много вопросов по этому поводу. Тем не менее, я хотел бы поделиться определенным образом об этом. Меня это не удовлетворяет полностью, потому что анимации несовместимы с . Вот что я сделал:
- У меня есть один div, который я хочу сначала спрятать и переключать при нажатии (другого div). Таким образом, скрытый div (
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>
И здесь - это jsfiddle, если проще.
Так что я действительно спрашиваю, может быть, есть альтернативный способ? Я пытался поместить атрибут hidden, но он не имел никакого эффекта и сначала переключал, а затем переключал отображение с блока на flex, но он выглядит неправильно с плитками и т. Д. Если у вас есть другое решение, я был бы рад услышать, спасибо!