jquery - CSS3 动画表现怪异

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

代码笔脚本:

$('.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 是负值我恢复了。现在时机可能并不完美，但这应该可以帮助您走得更远。

编辑:目前 item 类上还有一个 opacity: 0，为了让它们在动画后显示，我设置了 animation-fill-mode:转发 并且我添加了一个过渡到 menu-resp 类，使出现更平滑: 过渡:不透明度.3s;