CSS:不同类之间的转换

Question

实际上，我发现了很多这样的问题，但不是我想要的答案。

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

启动画廊时，您可以在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，但仅在opacity属性上设置css过渡。这样，您将看到不透明度的视觉效果，并且display:none;中的元素将无法单击。