当前位置: 首页 > 面试题库 >

如何在不使用CSS过渡的情况下将jQuery动画与CSS3属性结合在一起?

刘博雅
2023-03-14
问题内容

在这个例子中;我正在尝试使用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是最干