logo标签列表

CSS使用关键帧创建的 display:none 和 opacity 动画无法正常工作

htmlcssanimation
25

我有一个非常基本的HTML代码，目标是从display:none;动画变为display:block，同时将不透明度从0变为1。

我正在使用Chrome浏览器，它使用-webkit前缀作为首选，并使用-webkit-keyframes过渡设置来使动画可能。然而，它并没有起作用，只改变了display而没有淡入淡出效果。

这里有一个JSFiddle链接：http://jsfiddle.net/5g4yLcym/。

<html>
    <head>
        <style type="text/css">
            #myDiv
                {
                display: none;
                opacity: 0;
                padding: 5px;
                color: #600;
                background-color: #CEC;
                -webkit-transition: 350ms display-none-transition;
                }

            #parent:hover>#myDiv
                {
                opacity: 1;
                display: block;
                }

            #parent
                {
                background-color: #000;
                color: #FFF;
                width: 500px;
                height: 500px;
                padding: 5px;
                }

            @-webkit-keyframes display-none-transition
                {
                0% {
                    display: none; 
                    opacity: 0;
                    }

                1% 
                    {
                    display: block; 
                    opacity: 0;
                    }

                100% 
                    {
                    display: block; 
                    opacity: 1;
                    }
                }
        </style>
        <body>
            <div id="parent">
                Hover on me...
                <div id="myDiv">
                    Hello!
                </div>
            </div>
        </body>
    </head>
</html>
9个回答
40

display属性无法与CSS过渡或动画一起使用。

使用opacity、visibility或z-index，你可以将它们组合在一起。

尝试使用visibility: visible替代display: block，并使用visibility: hidden替代display: none。

最后，例如将z-index: -1和z-index: 100结合使用。

干得好；）

1
不要忘记，z-index 只适用于定位元素；如果需要，请使用 position:relative。 - Blazemonger
23

如果你正在使用@keyframes，你应该使用-webkit-animation而不是-webkit-transition。这里是@keyframes动画的文档：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations。

请参见下面的代码片段：

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  display: none;
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
}
.parent:hover .myDiv {
  display: block;
  opacity: 1;
  /* "both" tells the browser to use the above opacity
  at the end of the animation (best practice) */
  -webkit-animation: display-none-transition 1s both;
  animation: display-none-transition 1s both;
}
@-webkit-keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
@keyframes display-none-transition {
  0% {
    opacity: 0;
  }
}
<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

2016年更新的回答

为了反映出今天最佳实践，我会使用转换而不是动画。以下是更新后的代码：

.parent {
  background-color: #000;
  color: #fff;
  width: 500px;
  height: 500px;
  padding: 5px;
}
.myDiv {
  opacity: 0;
  padding: 5px;
  color: #600;
  background-color: #cec;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
.parent:hover .myDiv {
  opacity: 1;
}
<div class="parent">
  Hover on me...
  <div class="myDiv">Hello!</div>
</div>

3
display属性无法进行动画处理。您可以从关键帧动画中删除它，达到相同效果。 - web-tiki
这个拯救了我的一天...我正在使用transition和@keyframes，那就是我的问题所在...谢谢！ - KnF
16

无法使用动画效果来控制 display 属性。你可以尝试使用 visibility: hidden 到 visibility: visible

不，你可以使用display属性来实现：通过在display:none;和display:block;之间切换。 - cнŝdk
8
不行，display属性不能进行动画处理。 - Salmen Bejaoui
理论上它并不是设计来这样做的，但你可以这样做，参见这个例子中的答案。 - cнŝdk
6

只需要使用position: fixed并在@keyframe动画结束时删除z-index: -5（可以使用任何负索引...）。

CSS：

@keyframes fadeOut {
  0% { opacity: 1

  }
  99% {
    opacity: 0;
    z-index: 1;
  }
  100%{
    opacity: 0;
    display:none;
    position: fixed;
    z-index: -5;
  }
}
3

虽然有些棘手，有些讨厌，但终于完成了...

输入图像描述

  • 先淡出（透明度）
  • 然后真正隐藏（意味着不遮盖或捕获任何点击事件，获取height: 0等...）
    • 使用display：<whatever>确实不行。
    • 但是可以将scaleY动画化。或者通过translate远离页面，也可以使用经典方法：从特定高px值开始动画max-height减少到0px...

有关“在类切换时来回动画”更多一般信息的早期版本（以及如何防止在初始页面加载时进行该动画，请看这里）。

const div = document.querySelector('.target')

function toggleTarget() {
  div.classList.add('active');
  div.classList.toggle('play');
}
/* REF https://dev59.com/Iarka4cB1Zd3GeqPaj1H#49575979 */
/* REF https://dev59.com/Gl8d5IYBdhLWcg3woDYZ#64857102 */
body, html { /* eye candy */
  background: #444; display: flex; min-height: 100vh; align-items: center; justify-content: center;
}
button { font-size: 4em; border-radius: 20px; margin-left: 60px;}

div { /* eye candy */
  width: 200px; height: 100px; border-radius: 20px;
  background: green; display: flex; align-items: center; justify-content: center;
  font-family: sans-serif; font-size: 2em; color: white; text-align: center;
  text-shadow: 0px 2px 4px rgba(0,0,0,.6);
  
}

/* using this extra .active class prevents that there is an animation already on loading */
.active {
  animation: fadeAndHideBack 1s linear forwards;
}

.play {  
  opacity: 0;
  /* learning curve: setting background "awaits" animation finish,
     setting scale prematurely jumps to it, then doing animation from there */

  animation: fadeAndHide 1s linear forwards;
}


@keyframes fadeAndHide {
  0% { opacity: 1; }
  99.9% { opacity: 0; max-height: 100px; }
  100% { opacity: 0; max-height: 0; }
}

@keyframes fadeAndHideBack {
  0% { opacity: 0; max-height: 0; }
  0.1% { opacity: 0; max-height: 100px; }
  100% { opacity: 1; }
}
<div class="target"></div>
<button onclick="toggleTarget()">
  Toggle
</button>

2
你可以使用JavaScript来改变显示属性和动画。你不能在 @keyframes 中放置显示属性。
从元素 display:none 开始。然后同时添加 display:block 和 animation:* 类。 这里有一个带进出动画的工作示例。
1
添加这个CSS；
.fade:not(.show) {
    opacity: 1;
}

这对我有用...
0
这个例子怎么样：jsfiddle 问题是需要使用关键帧动画而不是过渡。
@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
#myDiv {
    opacity: 0;
    padding: 5px;
    color: #600;
    background-color: #CEC;
}
#parent {
    background-color: #000;
    color: #FFF;
    width: 500px;
    height: 500px;
    padding: 5px;
}
#parent:hover #myDiv {
    -webkit-animation: fadeAnimation 6s;
}
0

你不能对display属性进行动画处理。你可以对visibility属性进行动画处理。但是visibility和display不同，因为它不会完全从DOM中删除div元素（如果元素是表格，则属性visibility:collapse可以将元素从DOM中删除，这是一个例外）。你可以代替地对CSS属性height和width进行动画处理。例如，下面的代码将对方块进行动画处理。

function myAnimation(){
 var square= document.getElementById('square');
  if(square.getAttribute("class")==='square'){
    square.classList.add('animation');
  }else{
    square.classList.remove('animation');
  }
}
.square {
    background-color:blue;
    transform: translate(0, 0);
    width: 100px;
    height: 100px;
    opacity: 1;
    transition: all 0.5s ease-out;
}
.square.animation {
    transform: translate(-260px, -260px);
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 0.5s ease-in;
}
<html>
 <body>
  <div class="square" id="square"></div>
  <br/>
  <button onclick="myAnimation()">Animate</button> 
 </body>
</html>

顺便说一下，我已经使用了CSS过渡来为这个div添加动画效果。希望这对你有用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接