显示屏上的转换:属性

演示

在这个演示中,子菜单从更改display:none为display:block仍然设置为淡入淡出.

根据W3C 2013年11月19日的工作草案, display不是动画属性.幸运的是,它visibility是可动画的.您可以使用不透明度转换(JSFiddle)链接其转换:

HTML:

Foo
Hide
Show

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,那么它将保持可点击状态.

我的整洁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;
}

它到目前为止有效!

编辑:在此示例中未显示任何未应用.

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

我今天碰到了这个position: fixed,我正在重用一个模态.我无法保留它display: none,然后动画它,因为它只是跳入外观,并且z-index(负值等)也做了奇怪的事情.

我也使用height: 0到height: 100%,但只有当出现模式工作.这与您使用的left: -100%东西相同.

然后让我感到有一个简单的答案.等瞧:

首先,你隐藏的模态.注意heightis 0,并检查height转换中的声明......它有一个500ms,比我的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.

.modal-active #modal-overlay {
    height: 100%;
    opacity: 1;
    z-index: 90000;
    -webkit-transition: height 0s, opacity 300ms ease-in-out;
       -moz-transition: height 0s, opacity 300ms ease-in-out;
        -ms-transition: height 0s, opacity 300ms ease-in-out;
         -o-transition: height 0s, opacity 300ms ease-in-out;
            transition: height 0s, opacity 300ms ease-in-out;
}

就是这样,它就像一个魅力.

从其中一些答案和其他地方的一些建议中得出,以下内容适用于悬停菜单(我将其与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;
}

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

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

#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;
}

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
}

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