Question

我有一个淡入淡出的菜单（jQuery）。菜单包含几个从下往上淡入的项目（CSS3）。我在jsFiddle中创建了一个更简单的变体，但是当我尝试将它添加到我的网站时，它开始表现得很奇怪。我想问题与项目周围的一个div有关，然而，经过大量的努力，我仍然无法解决问题。

更容易的变种（jsFiddle）。在这里你可以看到正确的CSS3动画：

http://jsfiddle.net/VV2ek/5987/

应该工作但不工作的那个（CSS3 + jQuery）：

https://codepen.io/anon/pen/eGzGZX

[编辑]我正在尝试在此页面上创建效果（按菜单按钮）：http://www.vermont.eu/about?store=6

codepen脚本：

$('.button').click(function(e) {
		$(".menu-resp").fadeToggle(500);
    $(".respm1, .respm2, .respm3, .respm4, .respm5, .respm6").toggle(500);
});

.menu-resp {
	width: 100%;
	height: 100%;
	position: absolute;
  background-color: #000000;
	z-index: 2;
	display: none;
}
.menu-resp .menu-resp-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.menu-resp .menu-resp-box .item {
	font-family: 'Gotham-light', sans-serif;
	font-weight: 300;
	color: #ffffff;
	letter-spacing: 5px;
	text-align: center;
	font-size: calc(20px + 0.4vw);
	width: 300px; /* VIKTIGT */
	line-height: 230%;
	cursor: pointer;
}






/* Fade Effect */

.respm1 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.9s;   
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.respm2 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;   
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -1s;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.respm3 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.6s;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.respm4 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.7s;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.respm5 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.respm6 {
  display: none;
	animation: fadein 0.5s;
  -moz-animation: fadein 0.5s;
  -webkit-animation: fadein 0.5s;
  -o-animation: fadein 0.5s;
	-moz-animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
@keyframes fadein {
    0% {
        opacity: 0;
		    -moz-transform: translateY(-40px);
		    -ms-transform: translateY(-40px);
		    -webkit-transform: translateY(-40px);
		    transform: translateY(-40px);
    }
    100% {
        opacity:1;
        -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
	    	-webkit-transform: translateY(0px);
	    	transform: translateY(0px);
		    opacity: 1;
    }
}
@-moz-keyframes fadein {
    0% {
        opacity: 0;
		    -moz-transform: translateY(-40px);
		    -ms-transform: translateY(-40px);
		    -webkit-transform: translateY(-40px);
		    transform: translateY(-40px);
    }
    100% {
        opacity:1;
        -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
	    	-webkit-transform: translateY(0px);
	    	transform: translateY(0px);
		    opacity: 1;
    }
}
@-webkit-keyframes fadein {
    0% {
        opacity: 0;
		    -moz-transform: translateY(-40px);
		    -ms-transform: translateY(-40px);
		    -webkit-transform: translateY(-40px);
		    transform: translateY(-40px);
    }
    100% {
        opacity:1;
        -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
	    	-webkit-transform: translateY(0px);
	    	transform: translateY(0px);
		    opacity: 1;
    }
}
@-o-keyframes fadein {
    0% {
        opacity: 0;
		    -moz-transform: translateY(-40px);
		    -ms-transform: translateY(-40px);
		    -webkit-transform: translateY(-40px);
		    transform: translateY(-40px);
    }
    100% {
        opacity:1;
        -moz-transform: translateY(0px);
		    -ms-transform: translateY(0px);
	    	-webkit-transform: translateY(0px);
	    	transform: translateY(0px);
		    opacity: 1;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">PRESS</div>

<div class="menu-resp">
  <div class="menu-resp-box">
    <div class="item respm1">#1 Item</div>
    <div class="item respm2">#2 Item</div>
    <div class="item respm3">#3 Item</div>
    <div class="item respm4">#4 Item</div>
    <div class="item respm5">#5 Item</div>
    <div class="item respm6">#6 Item</div>
  </div>
</div>

Answer 1

看看这个，我想这更像你想要的？ codepen

您的代码存在问题，即您的商品和容器有display: none。

因此他们都开始从中间出现了。我所做的是切换容器上的类show，将opacity值设置为0到1并切换类animate项目

我注意到的另一件事是你对animation-delay的负面价值我还原了。现在时间可能不完美，但这应该会帮助你进一步。

修改：目前opacity: 0类上还有一个item，让我们在设置animation-fill-mode: forwards动画后显示它们，然后我添加了一个过渡到menu-resp {1}}类，使出现更平滑： transition: opacity .3s;

CSS3动画表现得很奇怪

1 个答案: