我正在使用 Bootstrap、Animate.css 和 Typed.js 构建网页。我想要的效果是页面为空白，nav 在完成时使用 animate.css fadeInDown 向下滑动 Typed.js 行开始编写以及完成时一个 V 形(由 FontAwesome 提供)使用 animate.css bounceInUp 制作动画。
我已经编写了以下代码，但一切都立即发生，人字形根本没有动画。
<body>
<!--NAV BAR SECITON-->
<nav class="navbar navbar-fixed-top">
<div class="container-fluid animated fadeInDown">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="companylogo.png" /></a>
<ul class="nav navbar-nav pull-right">
<li><h3><a href="#">Blog</a></h3></li>
</ul>
</div>
</div>
</nav>
<!-- Main page banner -->
<div class="jumbotron">
<div class="container text-center special">
<div class="centermaintextline vertical-center">
<div class="showAndTell">
<h1>
<span class="maintextline"></span>
</h1>
</div>
</div>
<div class="text-center bottom-box">
<h1><i class="fa fa-chevron-down"></i></h1>
</div>
</div>
</div>
<!--Script that should hide the section to be typed.js so the flashing cursor doesn't appear till ready-->
<!--Also hide the chevron-->
<script>
$(document).ready($('.showAndTell').hide());
$(document).ready($('.fa-chevron-down').hide());
</script>
<script src="typed.js" type="text/javascript"></script>
<!-- thanks http://www.mattboldt.com/ -->
<script>
/*This function will execute typed.js and then show the chevron and animate it-*/
function typingEffect()
{
$(".maintextline").typed({
strings: ["Stuff to be typed"],
typeSpeed: 100,
startDelay: 1000,
});
$('.fa-chevron-down').show();
$('.fa-chevron-down').add('animited infinite bounceInUp');
}
/*function that should show the block to be typed.js and then execute the function that will typed.js*/
function showTypingEffect()
{
$('.showAndTell').show();
typingEffect();
}
/*call the previous function to get things going after the navbar finishes animating*/
$(document).ready($('.container-fluid').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', showTypingEffect()));
</script>
</body>
CSS 内容
/*********************************************************
* *
* Stuff that affects the first panel *
* *
*********************************************************/
/*Makes .jumbotron occupy the full window*/
.jumbotron
{
width: 100%;
height:100%;
padding-top: 0px;
padding-bottom: 0px;
}
.jumbotron .container
{
width:100%;
height:100%;
padding-left: 0px;
padding-right:0px;
}
/*Makes things center vertically in the page, funnily enough*/
.vertical-center
{
min-height: 85%; /* Fallback for vh unit */
min-height: 85vh; /* You might also want to use
'height' property instead.
/* Make it a flex container */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Align the bootstrap's container vertically */
-webkit-box-align : center;
-webkit-align-items : center;
-moz-box-align : center;
-ms-flex-align : center;
align-items : center;
/* In legacy web browsers such as Firefox 9
we need to specify the width of the flex container */
width: 100%;
/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
hence the bootstrap's container won't be aligned to the center anymore.
Therefore, we should use the following declarations to get it centered again */
-webkit-box-pack : center;
-moz-box-pack : center;
-ms-flex-pack : center;
-webkit-justify-content : center;
justify-content : center;
}
.vertical-center
{
min-height: 85%; /* Fallback for browsers do NOT support vh unit */
min-height: 85vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
/* Remove the default bottom margin of .jumbotron */
.jumbotron .vertical-center
{
margin-bottom: 0;
}
/*Everything below here styles the text in the cetner of the page*/
.special
{
background: transparent;
color: #fff;
font-family: "ocr-a-std", san-serif;
text-transform: uppercase;
}
/*Make the main keyword underline */
.special a, .special a:hover, .special a:visited
{
text-decoration: underline;
color:#fff;
}
.bottom-box
{
bottom: 0;
margin-bottom: 50px;
position: absolute;
width:100%;
}
.fa-chevron-down
{
}
/*********************************************************
* *
* Stuff that affects the navigation bar *
* *
*********************************************************/
.nav
{
}
/*Style the top bar*/
.navbar-fixed-top, .navbar-fixed-top a, .navbar-fixed-top a:hover, .navbar-fixed-top a:visited, .navbar-fixed-top li
{
background-color: transparent;
border-color: transparent;
font-family: "futura-pt", sans-serif;
color: #fff;
font-size: 22px;
}
.navbar-fixed-top .navbrand
{
color: #fff;
}
.navbar-fixed-top
{
position: absolute;
}
.nav h4
{
margin-right: 0.3em;
}
/*********************************************************
* *
* Makes the cursor blink for the typed.js *
* *
*********************************************************/
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
最佳答案
.ready() 方法通常与匿名函数一起使用。
例子:
<script>
$(document).ready(function(){
$('.showAndTell').hide();
$('.fa-chevron-down').hide();
$('.container-fluid').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', showTypingEffect);
});
</script>
关于javascript - Animate.css 和 Typed.js - 隐藏类型直到动画结束。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35149431/