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

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为负值，所以我将其恢复了。 现在可能不是完美的时机，但这应该可以帮助您进一步。

编辑：当前在item类上还有一个opacity: 0 ，为了让它们在动画后显示，我设置了animation-fill-mode: forwards并且我向menu-resp类添加了一个过渡，以使显示更平滑： transition: opacity .3s;