时间：2010-07-25 22:52:50

标签： css css3 css-transitions

35 个答案:

答案 0 :(得分：1176)

您可以连接两个或更多个转换，visibility这次是最方便的。

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

（不要忘记transition属性的供应商前缀）

更多详情请见this article

答案 1 :(得分：729)

答案 2 :(得分：239)

在本文发布时，如果您尝试更改display属性，所有主流浏览器都会禁用CSS转换，但CSS动画仍可以正常工作，因此我们可以将它们用作解决方法。

示例代码： - （您可以相应地将其应用到您的菜单中）Demo

将以下CSS添加到样式表中： - 

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

然后将fadeIn动画应用于父项悬停时的子项： - （当然设置为display: block）

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

更新2019 - 也支持淡出的方法：

（有些JS要求）

// We need to keep track of faded in elements so we can apply fade out later in CSS
document.addEventListener('animationstart', function (e) {
  if (e.animationName === 'fade-in') {
      e.target.classList.add('did-fade-in');   
  }
});

document.addEventListener('animationend', function (e) {
  if (e.animationName === 'fade-out') {
      e.target.classList.remove('did-fade-in');
   }
});
div {
    border: 5px solid;
    padding: 10px;
}

div:hover {
    border-color: red;
}
 
.parent .child {
  display: none;
}
 
.parent:hover .child {
  display: block;
  animation: fade-in 1s;
}

.parent:not(:hover) .child.did-fade-in {
  display: block;
  animation: fade-out 1s;
} 

@keyframes fade-in {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

@keyframes fade-out {
  from { 
    opacity: 1; 
  }
  to { 
    opacity: 0;
  }
}
<div class="parent">
    Parent
    <div class="child">
        Child
    </div>
</div>

答案 3 :(得分：62)

我怀疑如果“显示”发生变化，那么转换被禁用的原因是因为实际显示的是什么。它确实不改变任何可以想象的平滑动画。

“display：none;”和“visibility：hidden;”是两个完全不同的东西。两者都具有使元素不可见的效果，但是“visibility：hidden;”它仍然在布局中呈现，但不是可见所以。隐藏元素仍占用空间，仍然以内联或块或块内联或表格或“display”元素告诉它呈现为的方式呈现，并相应占用空间。 不的其他元素会自动移动以占据该空间。隐藏元素不会将其实际像素呈现给输出。

另一方面，

“display：none”实际上阻止元素完全呈现 。它不会占用任何布局空间。其他元素占用了该元素占用的部分或全部空间，现在可以调整占用该空间，就好像元素根本不存在。

“display”不仅仅是另一个视觉属性。它建立元素的整个渲染模式，例如它是块，内联，内联块，表，表行，表格单元，列表项还是其他什么！每个都有非常不同的布局分支，没有合理的方法来动画或平滑过渡它们（试图想象从“块”到“内联”的平滑过渡，或反之亦然，例如！）。

这就是为什么在显示改变时禁用转换的原因（即使改变是来自或来自“无” - “无”不仅仅是不可见，它是它自己的元素渲染模式，这意味着根本不进行渲染！），< / p>

答案 4 :(得分：46)

display不是转换所依据的属性之一。

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties以获取可应用过渡的CSS属性列表。有关如何插值的信息，请参见https://drafts.csswg.org/css-values-4/#combining-values。

在https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#animatable-css中列出了CSS3（仅关闭警告弹出窗口）

  

我也尝试过使用身高，但这只是失败了。

上次我不得不这样做，我使用了max-height，这是一个可动画的属性（虽然它有点像黑客，它确实有效）但要注意它对于复杂的页面或用户来说可能非常笨拙使用低端移动设备。

答案 5 :(得分：35)

我知道这是一个非常古老的问题但是对于正在查看此主题的人来说，您现在可以向块属性添加自定义动画。

@keyframes showNav {
  from {opacity: 0;}
  to {opacity: 1;}
}
.subnav-is-opened .main-nav__secondary-nav {
  display: block;
  animation: showNav 250ms ease-in-out both;
}

Demo

在此演示中，子菜单从display:none更改为display:block并仍然可以淡化。

答案 6 :(得分：25)

我们可以使用transition-delay属性，而不是CSS中不存在的回调。

#selector {
    overflow: hidden; // hide the element content, while height = 0
    height: 0; opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}
#selector.visible {
    height: 100%; opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

那么，这里发生了什么？

  1. 当添加visible类时，height和opacity都会无延迟地启动动画（0ms），但height需要0ms才能完成动画（相当于display: block）和opacity需要600毫秒。

  2. 删除visible类时，opacity启动动画（0ms延迟，持续400ms），高度等待400ms，然后立即（0ms）恢复初始值（相当于{{ 1}}在动画回调中。

    3. 注意，这种方法比使用display: none的方法更好。在这种情况下，元素仍然占据页面上的空间，并且它并不总是合适的。

    有关更多示例，请参阅此article。

答案 7 :(得分：20)

根据W3C Working Draft 19 November 2013 display不是动画属性。幸运的是，visibility是可动画的。您可以使用不透明度转换（JSFiddle）链接其转换：

  • HTML：

    <a href="http://example.com" id="foo">Foo</a>
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>

  • CSS：

    #foo {
    transition-property: visibility, opacity;
    transition-duration: 0s, 1s;
}

#foo.hidden {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 1s, 0s;
    transition-delay: 0s, 1s;
}

  • 用于测试的JavaScript：

    var foo = document.getElementById('foo');

document.getElementById('hide-button').onclick = function () {
    foo.className = 'hidden';
};

document.getElementById('show-button').onclick = function () {
    foo.className = '';
};

请注意，如果您只是将链接设为透明，而不设置visibility: hidden，那么它将保持可点击状态。

答案 8 :(得分：13)

我整洁的JavaScript技巧将整个场景分成两个不同的功能！

为了准备事物，声明了一个全局变量并定义了一个事件处理程序：

  var tTimeout;
  element.addEventListener("transitionend", afterTransition, true);//firefox
  element.addEventListener("webkitTransitionEnd", afterTransition, true);//chrome

然后，当隐藏元素时，我使用这样的东西：

function hide(){
  element.style.opacity = 0;
}

function afterTransition(){
  element.style.display = 'none';
}

为了重新出现元素，我正在做这样的事情：

function show(){
  element.style.display = 'block';
  tTimeout = setTimeout(timeoutShow, 100);
}

function timeoutShow(){
  element.style.opacity = 1;
}

到目前为止一切正常！

答案 9 :(得分：12)

编辑：在此示例中未应用display none。

@keyframes hide {
  0% {
    display: block;
    opacity: 1;
  }
  99% {
    display: block;
  }
  100% {
    display: none;
    opacity: 0;
  }
}

上面发生的事情是，当不透明度淡出时，99％的动画显示被设置为阻挡。在最后一刻，display属性设置为none。

最重要的一点是在动画结束后使用动画填充模式保留最后一帧：前进

.hide {
   animation: hide 1s linear;
   animation-fill-mode: forwards;
}

以下是两个示例：https://jsfiddle.net/qwnz9tqg/3/

答案 10 :(得分：10)

我今天遇到了这个问题，我正在重复使用position: fixed模式。我无法保持它display: none然后为它设置动画，因为它只是跳入外观，并且z-index（负值等）也做了奇怪的事情。

我还使用了height: 0到height: 100%，但它只在模态出现时才有用。这与使用left: -100%或其他内容相同。

然后让我感到有一个简单的答案。瞧瞧：

首先，你隐藏的模态。请注意，height为0，并在转化中查看height声明...它的500ms，比{{1}更长过渡。请记住，这会影响外出的淡出过渡：将模态返回到其默认状态。

opacity

其次，您的可见模态。假设您正在为#modal-overlay { background: #999; background: rgba(33,33,33,.2); display: block; overflow: hidden; height: 0; width: 100%; position: fixed; top: 0; left: 0; opacity: 0; z-index: 1; -webkit-transition: height 0s 500ms, opacity 300ms ease-in-out; -moz-transition: height 0s 500ms, opacity 300ms ease-in-out; -ms-transition: height 0s 500ms, opacity 300ms ease-in-out; -o-transition: height 0s 500ms, opacity 300ms ease-in-out; transition: height 0s 500ms, opacity 300ms ease-in-out; } 设置.modal-active。现在body是height，我的转换也发生了变化。我希望立即更改100%，并height取opacity。

300ms

就是这样，它就像一个魅力。

答案 11 :(得分：8)

从其中的一些答案和其他地方的一些建议中，以下内容适用于悬停菜单（我特别使用bootstrap 3）：

nav .dropdown-menu {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms, opacity 300ms;
    -webkit-transition: max-height 500ms, opacity 300ms;
}
nav .dropdown:hover .dropdown-menu {
    max-height: 500px;
    opacity: 1;
    transition: max-height 0, opacity 300ms;
    -webkit-transition: max-height 0, opacity 300ms;
}

如果您同时指定height，也可以使用max-height代替height:auto，因为transition不允许使用max-height。 height的悬停值必须大于菜单的{{1}}。

答案 12 :(得分：6)

将overflow:hidden更改为overflow:visible。它效果更好。我这样用：

#menu ul li ul {
    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;
}

#menu ul li:hover ul  {
    overflow:visible;
    opacity:1;
    height:140px;
}

visible更好，因为overflow:hidden的行为与display:none完全相同。

答案 13 :(得分：5)

在Guillermo接受的答案之后写了CSS 转换2012年4月3日的规范改变了可见性转换的行为 并且现在可以用更短的方式解决这个问题，而无需使用 过渡延迟：

.myclass > div { 
                   transition:visibility 1s, opacity 1s; 
                   visibility:hidden;  opacity:0
               }
.myclass:hover > div 
               {   visibility:visible; opacity:1 }

两次转换指定的运行时间通常应该是 相同（虽然稍长的可见时间不是问题）。 对于正在运行的版本，请参阅我的博客 http://www.taccgl.org/blog/css-transition-visibility.html#visibility-opacity

W.r.t。问题的标题“在显示屏上转换：属性”和 回应Rui Marques和josh对接受的回答的评论： 此解决方案适用于的情况，如果显示或不相关则无关紧要 使用可见性属性（因为在这个问题中可能就是这种情况）。 它不会完全删除元素作为display：none，只需要它 不可见但它仍然停留在文档流中并影响以下元素的位置。 完全删除与display：none类似的元素的转换可以完成 使用高度（如其他答案和注释所示），最大高度或边距 - 顶部/底部，但也可以看到 How can I transition height: 0; to height: auto; using CSS? 和我的博客http://www.taccgl.org/blog/css_transition_display.html。

回应GeorgeMillo的评论： 需要属性和两个转换：不透明度属性 用于创建淡入和淡出动画和可见性 属性，以避免元素仍然对鼠标作出反应 事件。视觉效果和视觉效果的不透明度需要过渡 可见性延迟隐藏，直到淡出结束。

答案 14 :(得分：5)

用 CSS Animations 淡入淡出：

.item {
     display: none;
}

.item:hover {
     display: block;
     animation: fadeIn 0.5s;
}

@keyframes fadeIn {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}

答案 15 :(得分：4)

不需要javascript，也不需要极大的巨大高度。而是在文本元素上设置最大高度，并使用字体相对单位，如rem或em。这样，您可以设置比容器大的最大高度，同时避免延迟或弹出＆＃34;当菜单关闭时：

<强> HTML 

<nav>
  <input type="checkbox" />
  <ul>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
    <li>Link 1</li>
  </ul>
</nav>

<强> CSS 

nav input + ul li { // notice I set max-height on li, not ul
   max-height: 0;
}

nav input:checked + ul li {
   max-height: 3rem; // a little bigger to allow for text-wrapping - but not outrageous
}

在此处查看示例： http://codepen.io/mindfullsilence/pen/DtzjE

答案 16 :(得分：4)

我怀疑任何刚刚启动CSS过渡的人都会发现，如果你同时修改了display属性（block / none），它们就无法工作。一个尚未提及的解决方法是你可以继续使用display：block / none隐藏/显示元素，但将其不透明度设置为0，这样即使它显示：block，它仍然是不可见的。然后将其淡入，添加另一个CSS类，例如“on”，它将不透明度设置为1并定义不透明度的过渡。正如您可能想象的那样，您必须使用JavaScript将“on”类添加到元素中，但至少您仍在使用CSS进行实际转换。

P.S。如果您发现自己处于需要同时执行display：block和添加类“on”的情况下，请同时使用setTimeout推迟后者。否则，浏览器只会立即看到这两件事情并禁用转换。

答案 17 :(得分：3)

我多次遇到过这个问题，现在只是跟着：

.block {
  opacity: 1;
  transition: opacity 250ms ease;
}

.block--invisible {
  pointer-events: none;
  opacity: 0;
}

通过添加类block--invisible，整个元素将无法点击，但其背后的所有元素都将是由于所有主要浏览器都支持的pointer-events:none（没有IE＆lt; 11）。 / p>

答案 18 :(得分：3)

我终于找到了一个解决方案，将opacity与position absolute结合起来（隐藏时不占用空间）。

.toggle {
  opacity: 0;
  position: absolute;
  transition: opacity 0.8s;
}

.parent:hover .toggle {
  opacity: 1;
  position: static;
}

答案 19 :(得分：2)

我认为SalmanPK有最接近的答案，它可以使用以下CSS动画淡入或缩小项目。但是，display属性没有平滑动画，只有不透明度。

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

如果你想动画从显示块移动到显示无元素的元素，我不能看到它当前只有CSS，你必须获得高度并使用CSS动画来降低高度。这可以通过CSS实现，如下面的示例所示，但要知道为元素设置动画所需的确切高度值将会非常棘手。

jsFiddle 示例

CSS 

@-webkit-keyframes pushDown {
  0% {
    height: 10em;
  }
  25% {
    height: 7.5em;
  }
  50% {
    height: 5em;
  }
  75% {
    height: 2.5em;
  }
  100% {
    height: 0em;
  }
}

.push-down {
    -webkit-animation: pushDown 2s forwards linear;
}

的JavaScript 

var element = document.getElementById("element");

// push item down
element.className = element.className + " push-down";

答案 20 :(得分：2)

对于回答这么多问题的问题，我感觉差一点，但这个解决方案具有出色的兼容性，我还没有看到它：

.hidden-element {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity .5s ease-out;
}

.hidden-element.visible {
  position: static;
  z-index: auto;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

解释：它使用visibility: hidden技巧（在一步中与“show-and-animate”兼容）但使用组合position: absolute; z-index: -1; pointer-events: none;来确保隐藏容器不占用空间且不响应用户互动。

答案 21 :(得分：1)

答案 22 :(得分：1)

您可以使用转换事件执行此操作，因此，您可以为转换构建2个css类，一个保持动画另一个，保持display none状态。并在动画结束后切换它们？在我的情况下，如果我按下btn，我可以再次显示div，并删除这两个类。

尝试下面的剪辑......

＆＃13;
＆＃13; 
$(document).ready(function() {
  //assign transition event
  $("table").on("animationend webkitAnimationEnd", ".visibility_switch_off", function(event) {
    //we check if this is the same animation we want  
    if (event.originalEvent.animationName == "col_hide_anim") {
      //after the animation we assign this new class that basically hides the elements.    
      $(this).addClass("animation-helper-display-none");
    }

  });

  $("button").click(function(event) {

    $("table tr .hide-col").toggleClass(function() {
      //we switch the animation class in a toggle fashion...
      //and we know in that after the animation end, there is will the animation-helper-display-none extra class, that we nee to remove, when we want to show the elements again, depending on the toggle state, so we create a relation between them.
      if ($(this).is(".animation-helper-display-none")) {
        //im toggleing and there is already the above classe, then what we want it to show the elements , so we remove both classes...        
        return "visibility_switch_off animation-helper-display-none";
      } else {
        //here we just want to hide the elements, so we just add the animation class, the other will be added later be the animationend event...        
        return "visibility_switch_off";
      }

    });

  });

});
＆＃13; 
table th {
  background-color: grey;
}

table td {
  background-color: white;
  padding:5px;
}

.animation-helper-display-none {
  display: none;
}

table tr .visibility_switch_off {
  animation-fill-mode: forwards;
  animation-name: col_hide_anim;
  animation-duration: 1s;
}

@-webkit-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-moz-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@-o-keyframes col_hide_anim {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes col_hide_anim {
  0%   {opacity: 1;}
  100% {opacity: 0;}
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <theader>
    <tr>
      <th>Name</th>
      <th class='hide-col'>Age</th>
      <th>Country</th>
    </tr>
  </theader>
  <tbody>
    <tr>
      <td>Name</td>
      <td class='hide-col'>Age</td>
      <td>Country</td>
    </tr>
  </tbody>
</table>

<button>Switch - Hide Age column with fadeout animation and display none after</button>
＆＃13;
＆＃13;
＆＃13;

答案 23 :(得分：1)

问题的最简单的通用解决方案是：随意在CSS中指定display:none，但是您将使用JavaScript将其更改为block（或其他任何），然后您将还必须为您的元素添加一个类，该类实际上使用setTimeout（）进行转换。就是这样。

即：

<style>
#el {
    display: none;
    opacity: 0;
}
#el.auto-fade-in {
    opacity: 1;
    transition: all 1s ease-out; /* future, future, please come sooner! */
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}
</style>

<div id=el>Well, well, well</div>

<script>
var el = document.getElementById('el');
el.style.display = 'block';
setTimeout(function () { el.className = 'auto-fade-in' }, 0);
</script>

在最新的理智浏览器中测试过。显然不应该在IE9或更早版本中工作。

答案 24 :(得分：0)

我感谢所有的答案。这是我用于类似目的的内容：过渡与动画。

示例：https://jsfiddle.net/grinevri/tcod87Le/22/

<div class="animation"></div>
<div class="transition"></div>

@keyframes animationTo {
  0% { background-color: rgba(0, 0, 0, 0.1); }
  100% { background-color: rgba(0, 0, 0, 0.5); }
}

@keyframes animationFrom {
  0% { background-color: rgba(0, 0, 0, 0.5); }
  100% { background-color: rgba(0, 0, 0, 0.1); }
}

.animation,
.transition{
  margin: 5px;
  height: 100px;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.1);
}

.animation{
  animation: animationFrom 250ms;
}

.animation:hover{
  background-color: rgba(0, 0, 0, 0.5);
  animation: animationTo 250ms;
}

.transition{
  transition: background-color 250ms;
}

.transition:hover{
  background-color: rgba(0, 0, 0, 0.5);
}

答案 25 :(得分：0)

在这种情况下不使用关键帧的情况下应用过渡的另一种方法是将元素的宽度设置为零，然后取消设置悬停时

.className{
  visibility:hidden;
  opacity: 0;
  transition: .2s;
  width:0;
}

.className:hover{
  visibility:visible;
  margin-right: .5rem;
  opacity: 1;
  width:unset;
}

答案 26 :(得分：0)

我找到了解决此问题的更好方法，您可以使用CSS动画，并使显示项目的效果很棒。

    .item {
     display: none;
}

.item:hover {
     display: block;
     animation: fade_in_show 0.5s
}

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }
     100% {
          opacity: 1;
          transform: scale(1)
     }
}

答案 27 :(得分：0)

简单到：）

@keyframes fadeout {
0% { opacity: 1; height: auto; }
90% { opacity: 0; height: auto; }
100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

让它逐渐消失，然后使其高度为0； 另外，请确保使用转发，使其保持最终状态。

答案 28 :(得分：0)

我遇到了类似的问题，但找不到答案。后来，一些Google搜索将我引到了这里。考虑到我没有找到我想要的简单答案，我偶然发现了既优雅又有效的解决方案。

事实证明，visibility CSS属性的值collapse通常用于表项。但是，如果在其他任何元素上使用它，则会有效地将它们呈现为 hidden ，与display: hidden几乎相同，但具有增加的功能：该元素不会占用任何空间，您可以仍为有问题的元素设置动画。

下面是一个实际的例子。

function toggleVisibility() {
  let exampleElement = document.querySelector('span');
  if (exampleElement.classList.contains('visible')) {
    return;
  }
  exampleElement.innerHTML = 'I will not take up space!';
  exampleElement.classList.toggle('hidden');
  exampleElement.classList.toggle('visible');
  setTimeout(() => {
    exampleElement.classList.toggle('visible');
    exampleElement.classList.toggle('hidden');
  }, 3000);
}
#main {
  display: flex;
  flex-direction: column;
  width: 300px;
  text-align: center;
}

.hidden {
  visibility: collapse;
  opacity: 0;
  transition: visibility 2s, opacity 2s linear;
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.5s, opacity 0.5s linear;
}
<div id="main">
  <button onclick="toggleVisibility()">Click Me!</button>
  <span class="hidden"></span>
  <span>I will get pushed back up...</span>
</div>

答案 29 :(得分：0)

我启动了一个名为切换显示动画

的开源骨架项目

https://marcnewton.github.io/Toggle-Display-Animate/

这个骨架帮助器将允许您轻松模仿jQuery显示/隐藏，但具有输入/输出CSS3过渡动画。

它使用类切换，因此您可以在除display：none | block | table | inline等之外的元素上使用您想要的任何css方法，以及可以想到的其他替代用法。

它的主要设计目的是用于元素切换状态，它支持一个恢复状态，其中隐藏对象允许您反向运行关键帧或播放替代动画以隐藏元素。

我正在研究的概念的大部分标记是CSS，实际使用的javascript非常少。

这里有一个演示：http://marcnewton.co.uk/projects/toggle-display-animate/

答案 30 :(得分：0)

你可以使用显示器以你想要的自然方式工作 - 但是你必须使用JS来限制浏览器以使其工作，或者正如其他人已经建议在另一个标签中使用一个标签的花哨技巧。我不关心内部标签，因为它进一步使CSS和尺寸复杂化，所以这里是JS解决方案：

https://jsfiddle.net/b9chris/hweyecu4/1/

从以下框开始：

<div class="box hidden">Lorem</div>

一个隐藏的盒子。您可以点击以下内容进行转换：

function toggleTransition() {
  var el = $("div.box1");

  if (el.length) {
    el[0].className = "box";
    el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {    
        el[0].className = "box hidden";
    });
  } else {
    el = $("div.box");
    el[0].className = "box";
    el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {    
        el[0].className = "box box1";
    });
  }

  return el;
}

someTag.click(toggleTransition);

CSS就是你猜的：

.hidden {
  display: none;
}
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 20px;
    top: 20px;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: scale(.2);
    transform: scale(.2);
  -webkit-transition: transform 2s;
  transition: transform 2s;
}
.box1{
    -webkit-transform: scale(1);
    transform: scale(1);
}

密钥是限制显示属性。通过删除隐藏的类然后等待50ms，然后通过添加的类开始转换，我们让它出现然后像我们想要的那样展开，而不是只是在没有任何动画的情况下进入屏幕。类似的情况发生在另一种方式，除了我们等到动画结束后再应用隐藏。

注意：我在这里滥用.animate(maxWidth)以避免setTimeout竞争条件。当您或其他人不知道它的代码时，setTimeout会迅速引入隐藏的错误。使用.animate()可以很容易地杀死.stop()。我只是使用它在标准fx队列上放置50毫秒或2000毫秒的延迟，在此基础上构建其他编码器很容易找到/解决。

答案 31 :(得分：0)

您只需使用css 可见性：隐藏/可见而不是显示：无/阻止

div {
    visibility:hidden;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
}

parent:hover > div {
    opacity: 1;
    visibility: visible;
}

答案 32 :(得分：0)

你也可以用这个：

.dropdown {
height: 0px;
width: 0px;
opacity: .0;
color: white;
}
.dropdown:hover {
height: 20px;
width: 50px;
opacity: 1;
transition: opacity 200ms;
/* Safari */
-webkit-transition: opacity 200ms;
}

答案 33 :(得分：-1)

如果您使用jQuery设置类，则可以100％使用：

$(document).ready(function() {
  $('button').click(function() {
    var container = $('.container');
    
    if (!container.hasClass('active')) {
      container.addClass('show').outerWidth();
      container.addClass('active');
    }
    else {
      container.removeClass('active').one('transitionend', function() {
        container.removeClass('show');
      });
    }
  });
});
.container {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.container.show {
  display: flex;
}
 
.container.active {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">Toggle</button>

<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

当然，您可以只使用jQuery .fadeIn()和.fadeOut()函数，但是设置类的优点是，如果您要转换为block以外的显示值（例如是.fadeIn()和.fadeOut()的默认值。

在这里，我要过渡到显示flex并具有良好的淡入淡出效果。

答案 34 :(得分：-1)

可以使用转换计时功能step-end和step-start

来处理

例如：https://jsfiddle.net/y72h8Lky/

＆＃13;
＆＃13; 
$(".run").on("click", function() {
    $(".popup").addClass("show");
});
$(".popup").on("click", function() {
    $(".popup").removeClass("show");
})
＆＃13; 
.popup {
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1450;
    background-color: rgba(0, 175, 236, 0.6);
    transition: opacity 0.3s ease-out, top 0.3s step-end;
}
.popup.show {
    transition: opacity 0.3s ease-out, top 0.3s step-start;
    opacity: 1;
    top: 0;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup"></div>
<button class="run" style="font-size: 24px;">Click on me</button>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题