不透明度过渡（由额外的 class 触发）不向后工作

Question

我正在用额外的 class (.opened) 和 jQuery 触发一个过渡。

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

.box.opened {
    visibility: visible;
    opacity: 1;
}

当 jQuery 添加 .opened class 时过渡是平滑的，但当 jQuery 删除它时则不是。

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

我认为是因为 visibility 属性，但为什么不能倒过来呢？

Live demo

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>

您可以找到 可以转换或设置动画的属性列表 here in the specs。

Answer 2

这是一个不使用 jQuery 的替代方案（如 pure CSS）。它使用 :target 伪 class 在 ON 和 OFF 状态之间切换。

它还展示了如何使用带有 menu/close 按钮的图标字体。

@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>

不透明度过渡（由额外的 class 触发）不向后工作

Opacity transition (triggered by an extra class) doesn't work backwards

html

css

jquery

css-transitions