如何制作一个css动画，通过点击进行动画输入和输出

我对使用CSS动画单击元素的动画进出有点困惑。如何制作一个css动画，通过点击进行动画输入和输出

我可以在工作中获得动画，但出于某种原因动画制作无能为力。我换出类名切换不同的动画，名称切换正常，但动画只是不好。

如果有人能指出我的错误，我会非常感激。

对不起，我知道这是很多代码。

这里是我的SCSS：

.animate-in .twitter, .animate-in .google-plus, .animate-in .facebook, 
.animate-out .twitter, .animate-out .google-plus, .animate-out .facebook{ 
    @include animation-name(dropIn, fadeIn, dropShadow); 
    @include animation-duration(500ms); 
    @include animation-delay(0ms); 
    @include animation-direction(alternate); 
    @include animation-fill-mode(forwards); 

} 
.animate-out .twitter, .animate-out .google-plus, .animate-out .facebook{ 
    @include animation-name(fadeOut); 
    @include animation-duration(500ms); 
    @include animation-delay(0ms); 
    @include animation-play-state(play); 
    @include animation-fill-mode(forwards); 
} 
.animate-in .google-plus, 
.animate-out .google-plus{ 
    @include animation-delay(150ms); 
    @include animation-timing-function(cubic-bezier(0.77, 0, 0.175, 1)); 
} 
.animate-in .facebook, 
.animate-out .facebook{ 
    @include animation-delay(400ms); 
}

而且关键帧：

$dropHeight:90px; 
@include keyframes(dropIn) { 
    0% { 
      @include transform( translateY(-$dropHeight) rotate(-20deg) scale(2,4)); 

    } 
    100% { 
     @include transform(translateY(0px) rotate(0deg) scale(1,1)); 
    } 
} 
@include keyframes(dropShadow) { 
    0% { 
      @include text-shadow(-$dropHeight $dropHeight 10px rgba($darkBlue,0.2)); 

    } 
    100% { 
     @include text-shadow(0 0 1px darken($darkBlue,3%)); 
    } 
} 
@include keyframes(fadeIn) { 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
    } 
@include keyframes(fadeOut) { 
    from { 
     opacity:1; 
    } 
    to { 
     opacity:0; 
    } 
    }

我使用这个JS切换按钮：

$('.navbar-toggle').on('click', function() { 
    $('div.navbar-collapse.collapse').toggleClass('animate-out').toggleClass('animate-in'); 
});

然后在这里是HTML也是：

<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span><span class="icon-bar"> 
</span><span class="icon-bar"></span> 
</button> 
<div class="navbar-collapse animate-out collapse" style="height: 133px;"> 
    <ul class="nav navbar-nav"> 
     <li class="facebook active"><a href="#about"> <i class="fa fa-facebook"> </i><span class="text-hide">Facebook</span></a></li> 
     <li class="twitter"><a href="#"> <i class="fa fa-twitter"> </i><span class="text-hide">Twitter</span></a></li> 
     <li class="google-plus"><a href="#contact"> <i class="fa fa-google-plus"> </i><span class="text-hide">Google+</span></a></li> 
    </ul> 
</div>

来源

2014-03-28 Daimz

您是否试用过.fadeIn()或.fadeOut()？

这应该没有写所有的CSS工作

来源

2014-05-31 18:24:21 PauloNunes

这不提供问题的答案。要批评或要求作者澄清，在他们的帖子下留下评论 - 你总是可以评论你自己的帖子，一旦你有足够的[声誉]（http://stackoverflow.com/help/whats-reputation），你会能够[评论任何帖子]（http://stackoverflow.com/help/privileges/comment）。 –

@ n.m。我只是想帮忙而已，就是这样。我没有足够的声誉发表评论。如果你真的想要我删除或编辑我的答案告诉我，但不要尖叫我的男人，thx。 – PauloNunes

如何制作一个css动画，通过点击进行动画输入和输出

回答

相关问题