javascript - CSS:不同类之间的过渡

Question

我实际上发现了很多这样的问题，但没有找到我需要的答案。

大约 1 周前我询问了一个画廊，现在“几乎”完成了它，我只有 1 个问题。

启动图库时，您可以在 4 个类别之间进行选择。 您单击其中一个，然后显示特定图库。

我用这段代码做到了这一点:

<div class="Category wow pulse" data-wow-delay="1s">
  <h1>SELECT AN CATEGORY</h1>
  <div class="Selection wow fadeInDown" data-wow-delay="1.5s">
   <ul>
    <li class="selection-choose advertisement">Advertisement</li>
    <li class="selection-choose social">Social Media</li>
   </ul>
   <ul>
    <li class="selection-choose cinema4d">Cinema 4D</li>
    <li class="selection-choose manipulation">Manipulation</li>
   </ul>
  </div>
 </div>

<div class="Gallery">
  <div class="Advertisement-Gallery">
   ...

function showWorkGallery() {
 $('.advertisement').on('click', function() {
  $('.Advertisement-Gallery').addClass('make-visible');
 });
 $('.social').on('click', function() {
  $('.Social-Media-Gallery').addClass('make-visible');
 });
 $('.cinema4d').on('click', function() {
  $('.Cinema-4D-Gallery').addClass('make-visible');
 });
 $('.manipulation').on('click', function() {
  $('.Manipulation-Gallery').addClass('make-visible');
 });
}

.Advertisement-Gallery, .Social-Media-Gallery, .Cinema-4D-Gallery, .Manipulation-Gallery
  display: none
  width: 37%
  margin-top: 0
  opacity: 0
  transition: all 0.5s ease-in-out

 .make-visible
  display: block !important
  opacity: 1 !important
  margin-top: 10px !important
  transition: all 0.5s ease-in-out

尽你所能(希望代码有点困惑，我认为它可以做得更小)我正在尝试在现在显示和可见状态之间进行转换。
我找到的所有答案都有不透明度的解决方案:0，然后是不透明度:1。 这是行不通的，因为它们必须首先显示:无(当它们不透明度为 0 时您仍然可以单击它们，并且它们将网站扩展到底部)。
不知何故应该可以只过渡不透明度和边距(我知道你可以做过渡:不透明度等，但这不起作用)

感谢所有能帮助我的人<3

编辑:这是一个 JSFiddle :) https://jsfiddle.net/as7Luccj/

Answer 1

您可以同时更改display 和 opacity，但只能将css transition 放在opacity 属性上.这样你会看到不透明度的视觉效果，带有display:none;的元素将不可点击。