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 AND opacity，但只将css转换放在opacity属性上。这样，您将看到不透明度的视觉效果，并且display:none;的元素将无法点击。

CSS：不同类之间的转换

1 个答案: