不透明度转换(由额外的类触发)无法向后工作

Question

我正在用jQuery启动一个带有额外类（.opened）的转换。

.box {
    width: 200px;
    height: 200px;
    background: red;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.3s ease;
}
.box.opened {
    visibility: visible;
    opacity: 1;
}

当jQuery添加.opened类时，转换是平滑的，但当jQuery删除它时则不会

我应该使用animate()还是可以使用CSS获得预期的结果？

我认为这是因为visibility属性，但为什么不向后处理呢？

实时演示

Answer 1

原因是只有opacity在转换，而visibility没有，因此元素立即消失。由于这种立即消失，opacity转换不可见。转换visibility也类似于下面的代码段。

.box {
    width: 200px;
    height: 200px;
    background: red;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.3s ease, visibility 1.3s ease;
}
.box.opened {
    visibility: visible;
    opacity: 1;
}

$(document).ready(function() {
  $('.trigger').click(function(e) {
    e.preventDefault();
    $('.box').toggleClass('opened');
  });
});

.box {
  width: 200px;
  height: 200px;
  background: red;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.3s ease, visibility 1.3s ease;
}
.box.opened {
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="trigger">Trigger</a>
<div class="box"></div>

注意：您实际上不需要更改visibility，因为它所做的事情与opacity: 0所做的几乎相同。因此，您可以取消visibility属性更改。

$(document).ready(function() {
  $('.trigger').click(function(e) {
    e.preventDefault();
    $('.box').toggleClass('opened');
  });
});

.box {
  width: 200px;
  height: 200px;
  background: red;
  opacity: 0;
  transition: opacity 1.3s ease;
}
.box.opened {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="trigger">Trigger</a>
<div class="box"></div>

但是，保留visibility属性更改并取消opacity更改将不会产生相同的输出（如下面的片段所示）。

$(document).ready(function() {
  $('.trigger').click(function(e) {
    e.preventDefault();
    $('.box').toggleClass('opened');
  });
});

.box {
  width: 200px;
  height: 200px;
  background: red;
  visibility: hidden;
  transition: visibility 1.3s ease;
}
.box.opened {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="trigger">Trigger</a>
<div class="box"></div>

您可以在规格中找到可以转换或设置动画的属性列表。

Answer 2

这里有一个不使用jQuery的替代方案（如纯CSS中）。它使用：target伪类在ON和OFF状态之间切换。

它还展示了如何使用带有菜单/关闭按钮的图标字体。

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
#box                        { width: 200px; }
#box a                      { width: 100%; position: relative; text-decoration: none }
.menu__content              { width: 100%; height: 200px; padding: 8px; opacity: 0;
                              background: rgba(255,0,0,.3); transition: opacity 0.5s ease }
#box        .menu__open     { display: block } /* initial state */
#box:target .menu__open     { display: none  } /* hidden when __content visible */
#box        .menu__close    { display: none  } /* initial state, inverse of __open */
#box:target .menu__close    { display: block } /* hidden when __content invisible */
#box        .menu__content  { opacity: 0;    } /* __close state */
#box:target .menu__content  { opacity: 1; position: relative; } /* __open state */

<div id="box">
  <a   class="menu__open material-icons"  href="#box">menu</a>
  <a   class="menu__close material-icons" href="#"   >close</a>
  <div class="menu__content">Hello. This is some stuff inside a nice red box.</div>
</div>