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属性，但为什么不能倒退呢？

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的替代方法（如纯CSS ）。它使用：target伪类在ON和OFF状态之间切换。

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

＆＃13;

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

＆＃13;

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

＆＃13;

不透明度转换（由额外的类触发）不会向后工作

2 个答案: