transform rotate()不适用于Animate.css
transform rotate() not working with Animate.css
transform:rotate()在没有animate.css的情况下工作,但在使用animate.css时不工作
这是代码:
HTML
<div id="fresh">FRESH</div>
CSS
#fresh{
position : absolute;
background-color : #cf2c2c;
width: 38px;
padding-left: 2px;
color: #ffffff;
border-radius: 5px;
-ms-transform: rotate(-37deg);
-webkit-transform: rotate(-37deg);
transform: rotate(-37deg);
right: 113px;
bottom: 40px;
font-size: 10px;
z-index : 9999;
}
jQuery
$(document).ready(function(){
$('#fresh').addClass("animated tada");
});
编辑
动画不起作用,但rotate()正在起作用。意味着两者不合作。
Fiddle 演示
更新1
$(document).ready(function(){
$('#fresh').addClass("animated tada");
});
#fresh{
position : absolute;
background-color : #cf2c2c;
width: 38px;
padding-left: 2px;
color: #ffffff;
border-radius: 5px;
-ms-transform: rotate(-37deg);
-webkit-transform: rotate(-37deg);
transform: rotate(-37deg);
right: 113px;
bottom: 40px;
font-size: 10px;
z-index : 9999;
}
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fresh">FRESH</div>
好的,我已经找到了为什么不起作用。需要添加正确的animate.css文件:https://daneden.github.io/animate.css/animate.min.css
现在就试试。运行良好
更新2
$(document).ready(function(){
finish =0;
AnimateRotate("-37");
function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('#fresh');
// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
duration: 500,
step: function(now) {
// in the step-callback (that is fired each step of the animation),
// you can use the `now` paramter which contains the current
// animation-position (`0` up to `angle`)
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
},
complete: function() {
if(finish!=1)
$('#fresh').addClass("animated tada");
}
});
};
$('#fresh').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$('#fresh').removeClass();
finish=1;
AnimateRotate("-37");
});
});
#fresh{
position : absolute;
background-color : #cf2c2c;
width: 38px;
padding-left: 2px;
color: #ffffff;
border-radius: 5px;
-ms-transform: rotate(-37deg);
-webkit-transform: rotate(-37deg);
transform: rotate(-37deg);
right: 113px;
bottom: 40px;
font-size: 10px;
z-index : 9999;
}
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fresh">FRESH</div>
我找到了另一个解决方案,但它并不像我预期的那样准确。它运行良好,仍在等待好的答案。
HTML
<div class="rotate37i">
<div id="fresh">FRESH</div>
</div>
CSS
#fresh{
position : absolute;
background-color : #cf2c2c;
width: 38px;
padding-left: 2px;
color: #ffffff;
border-radius: 5px;
right: 113px;
bottom: 40px;
font-size: 10px;
z-index : 9999;
}
.rotate37i {
-ms-transform: rotate(-37deg);
-webkit-transform: rotate(-37deg);
transform: rotate(-37deg);
}
相关文章:
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- PHP中的setcookie仅适用于localhost
- html5 drawImage适用于firefox,而不是chrome
- 提供“;onClick"适用于iPad(触摸屏)和桌面用户的默认功能
- jQuery表单验证适用于Mozilla和Internet Explorer,但不适用于Chrome或Safari
- ResolveUrl是否适用于././也
- Firebase updateChildValues适用于IOS,但不适用于Web和Android
- JavaScript警报适用于int,但不适用于string
- SQLite插件适用于Mac和Windows,但不适用于手机上的Safari
- Regex Replace仅适用于Last Match
- window.onload适用于aspx页面,但不适用于普通html
- Jquery Ajax POST不工作.适用于GET
- 画布上的自定义字体仅适用于safari
- Javascript仅适用于alert()和Debug模式
- JS适用于Firefox和Safari,但不适用于Chrome.此处'是我的网站
- Regex不适用于Firefox,但适用于Chrome
- 通过单击主菜单外部关闭子菜单'不适用于IE,但适用于Firefox&铬
- 当使用.animate({width: 'hide'})隐藏时,元素在消失之前会闪烁,但仅适用于Chro
- JQuery .animate()仅适用于Chrome浏览器
- .animate()适用于Firefox、Chrome和IE9,但不适用于IE10(Jquery 1.8.3和1.9.1