在这个例子中;我正在尝试使用css3 rotation属性创建一个jQuery动画。我可以使用css3 transition
和jQuery
管理此动画,css()
但我想animate()
根据我的jQuery版本使用jQuery 来旋转deg值。
可以在jQuery 1.8.0中使用具有CSS3属性值的动画吗?
jQuery:
var rotateVal = 90;
//this method isn't working
$('.red').animate({
'transform':'rotate('+rotateVal+'deg)'
},500);
//this way works but i don't want to do this with transitions
$('.black').css({
'transform':'rotate('+rotateVal+'deg)',
'transition':'1s'
});
HTML:
<span class="black"></span>
<span class="red"></span>
编辑:删除了供应商前缀,例如-webkit-
。感谢KevinB。
可能,但并不容易。
var red = $(".red"),
rotateVal = 90;
$("<div />").animate({
height: rotateVal
},{
duration: 500,
step: function(now){
red.css('transform','rotate('+now+'deg)');
}
});
这基本上会创建分离div的假动画,然后在每个步骤上更新目标div的旋转。
编辑:糟糕!错误的参数顺序。这是一个演示。http://jsfiddle.net/qZRdZ/
请注意,在1.8.0中,我认为您无需指定所有供应商前缀。
使用此方法,几乎可以动画任何东西,只要记住类似的东西+=
,-=
除非进行编码,否则将无法正常工作。
更新:
这是我的解决方案和cuzzea的解决方案在一个函数之后抽象的组合。
$.fn.rotate = function(start, end, duration) {
console.log(this);
var _this = this;
var fakeDiv = $("<div />");
_this.promise().done(function(){
_this.animate({"a":end},{duration:duration});
fakeDiv.css("height", start).animate({
height: end
}, {
duration: duration,
step: function(now) {
_this.css("transform", "rotate(" + now + "deg)");
},
complete: function() {
fakeDiv.remove();
}
});
});
return _this;
};
var red = $('.red');
red.click(function() {
if ( !$(this).is(':animated') ) {
red.rotate(45,135,500);
setTimeout(function(){
red.rotate(135,190,500);
},750);
setTimeout(function(){
red.rotate(190,45,500);
},1500);
}
});
});
问题内容: 因此,我了解了如何同时执行CSS3过渡和动画。我用谷歌搜索的不清楚是什么时候使用它。 例如,如果我想使球弹跳,很明显,动画是必经之路。我可以提供关键帧,而浏览器将做中间帧,并且我将获得一个不错的动画。 然而,在某些情况下,无论哪种方式都可以达到上述效果。一个简单而常见的示例是实现Facebook风格的滑动抽屉菜单: 可以通过以下过渡来实现此效果: 或者,通过类似这样的动画: 使用HTM
定义 基于animejs封装的React组件。 图片展示 代码演示 import Anime from 'pile/dist/components/anime' const {CssTransform} = Anime let moveAlone = { targets: '.anime-move-demo-alone', left: '240px', backgroundColo
问题内容: 每当我将其悬停在其父元素上时,我一直试图使用css来显示Hidden Div淡入。 到目前为止,我所能做的就是让隐藏的div显示出来,但是到目前为止,还没有轻松的过渡。 这是我的代码: HTML: CSS: 关于我在做什么错的任何线索吗?当我将鼠标悬停在按钮上时,只是试图为隐藏的内容提供平滑的效果。提前致谢! 问题答案: 从页面中删除一个块,就好像它从来没有出现过一样。块不能部分显示;
问题内容: 我正在使用iPad HTML5应用程序,并且已经实现了ontouch支持以更快地触发事件,并且我使用jQuery来更轻松地定位元素,但是对于动画,我使用的是CSS3过渡 您觉得更快吗?使用jQuery动画,因为我已经导入了库或在使用jQuery定位元素时使用CSS3过渡? 问题答案: jQuery动画要比CSS动画慢得多。 原因 可能是因为jquery必须使用计时器和循环来修改DOM元
因此,基本上我正在尝试使用scrapinghub的Crawlera代理,并在windows上使用python的selenium chrome。 我检查了留档,他们建议这样使用Polipo: 1)在 /etc/polipo/config中添加以下行 2) 将此添加到selenium驱动程序 现在我想不使用脊髓灰质炎,直接使用代理。 有没有办法替换polipo_proxy变量并将其更改为crawler
问题内容: 我正在尝试将图像(加号)旋转45度以创建十字符号。到目前为止,我已经设法使用下面的代码实现了这一点,但是它可以在悬停状态下工作,我想让它在点击时旋转。 是否有 使用CSS 的简单方法? 我的代码是: CSS HTML 问题答案: 如果您只想使用CSS解决方案,可以使用active 但是,当活动移动时,转换将不会持续。为此,您需要javascript(jqueryclick和css是最干