Question

我在合并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>

here是一个jsfiddle，如果更简单的话。

所以我要问的是这可能是替代方法吗？我尝试过放置hidden属性，但是它没有任何作用，先切换，然后将显示从块更改为flex，但是在磁贴等方面看起来是错误的。如果您有其他解决方案，我很乐意听到了，谢谢！

组合显示：无和显示：flex的替代方法

0 个答案: