CSS动画文本不工作
css animation text not working
更新:如果我使用直接链接而不是rocketscript
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
i am trying to rotate words with css animation and tried everything but its not working.
我想一个一个地旋转名称。这是我的护照https://jsfiddle.net/knfwom9n/
新年这个词应该改变，像排灯节、妇女节这样的新词应该出现，但除了动画，一切都正常。
这里是完整的代码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<style type="text/css">
.cf-hidden {
display: none;
}
.cf-invisible {
visibility: hidden;
}
</style>
<link rel="stylesheet" href="http://something.com/js/css/stylewish.css">
<link href="http://something.com/img/icon.png" rel="icon" type="image/x-icon">
<style type="text/css"></style>
</head>
<body>
<main>
<div class="row container">
<div class="col s12">
<div class="valign-wrapper">
<div class="col l3 hide-on-small-only">
</div>
<div class="col s12 l6 offset-l3">
<div class="valign card-panel z-depth-2">
<div class="card-content">
<div class="row">
<div class="create-idea">
<img class="center" src="http://something.com/js/css/wishes-sharing-2.svg" height="100px" width="100px" alt="Wishes">
<img class="center" src="http://something.com/js/css/wishes-sharing.svg" height="100px" width="100px" alt="Wishes">
<br>
<section class="cd-intro">
<h5 class="cd-headline letters type">
<span>Create Your Wishes For </span>
<span class="cd-words-wrapper">
<b class="is-hidden" style="opacity: 1;"><i class="out">D</i><i class="out">i</i><i class="out">w</i><i class="out">a</i><i class="out">l</i><i class="out">i</i></b>
<b class="is-hidden" style="opacity: 1;"><i class="out">F</i><i class="out">r</i><i class="out">i</i><i class="out">e</i><i class="out">n</i><i class="out">d</i><i class="out">s</i><i class="out">h</i><i class="out">i</i><i class="out">p</i></b>
<b class="is-hidden" style="opacity: 1;"><i class="out">B</i><i class="out">i</i><i class="out">r</i><i class="out">t</i><i class="out">h</i><i class="out">d</i><i class="out">a</i><i class="out">y</i></b>
<b class="is-hidden" style="opacity: 1;"><i class="out">C</i><i class="out">h</i><i class="out">r</i><i class="out">i</i><i class="out">s</i><i class="out">t</i><i class="out">m</i><i class="out">a</i><i class="out">s</i></b>
<b class="is-visible" style="opacity: 1;"><i class="in">N</i><i class="in">e</i><i class="in">w</i><i class="in"> </i><i class="in">Y</i><i class="in">e</i><i class="in">a</i><i class="out">r</i></b>
</span>
</h5>
</section>
</div>
<div class="input-field col s12 ">
<input id="username" onKeyDown="validateAlpha();" type="text" class="validate" required="" maxlength="15">
<label for="username">Enter Your Name</label>
</div>
<select id="wishes-select" onChange="selected();" name="wishes-select" style="margin-bottom: 15px;">
<option value="0" hidden="" disabled="" selected="">Choose your Wishes</option>
<option value="friendship">Friendship Day</option>
<option value="birthday">Birth Day</option>
<option value="magic">Women's Day</option>
<option value="diwali">Diwali (India)</option>
<option value="xmas">Christmas</option>
<option value="new">New Year</option>
</select>
<div class="input-field col s12" id="bnames" style="display:none;">
<input id="bname" type="text" onKeyDown="validateAlpha();" class="validate" required="" maxlength="15">
<label for="bname">Birthday Boy/Girl Name</label>
</div>
<div class="input-field col s12" id="bnamess" style="display:none;">
<input id="bwords" type="text" onKeyDown="validateAlpha();" class="validate" required="" maxlength="50">
<label for="bwords">Birthday Quotes</label>
</div>
<p id="error-display" style="display:none;"></p>
<button class="btn waves-effect waves-light" onClick="create();" type="submit" style="width:100%" name="action">Create</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer blue-grey darken-1">
<div class="footer-copyright">
<div class="container">
<a class="grey-text text-lighten-4" href="http://something.com/" target="_blank">Create Wishes</a>
<a class="grey-text text-lighten-4 right" href="http://something.com" target="_blank">something</a>
</div>
</div>
</footer>
<script data-rocketsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/rocketscript" data-rocketoptimized="true"></script>
<script data-rocketsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js" type="text/rocketscript" data-rocketoptimized="true"></script>
<script data-rocketsrc="http://something.com/js/wish.js" type="text/rocketscript" data-rocketoptimized="true"></script>
<script data-rocketsrc="http://something.com/js/hoped.min.js" type="text/rocketscript" data-rocketoptimized="true"></script>
<div class="hiddendiv common"></div>
</body>
任何帮助都会很好。
js fiddle link https://jsfiddle.net/knfwom9n/
我通过将js文件的url更改为通常的url而不是rocketscript解决了这个问题像这样
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
rocketscript导致问题
相关文章：
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- 如何在php中创建一个函数，该函数与文本区域一起工作，通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 为什么文本对齐:对;工作不正常
- IE8更改文本区域上的事件侦听器不工作
- Alloy UI文本区域工作不正常
- 提交按钮只能在onchange调用输入文本后第二次点击时工作
- Cufon..简单渐变文本..是't工作
- 无法使我的文本参数与我的查询一起工作
- 我的剧本赢了'不能在IE中工作(甚至9）?修改复制文本的简单javascript
- fabric.js中的文本对齐方式未按预期工作
- 预览文本区域分区不工作
- Javascript/Php聊天-输入is'不能在一个文本框中工作
- 使用jQuery在焦点上选择文本框是't在移动浏览器中工作
- 阻止选择在IE中工作但不在Chrome中工作的文本
- 我正在用来自选择的数据填充文本框，它可以工作，但是
- 如果文本在高图表中较多，则工具提示无法正常工作
- 将公司名称绑定到更新面板中的下拉列表，自动完成文本框工作，但每次页面刷新时
- 文本区域最大长度属性无法在所有浏览器中正常工作
- 如何在表单文本框中启用退格工作
- .text 未获取所有文本，但在控制台中工作
