javascript - CSS3JS get position of element during animation - Stack Overflow

admin管理员组

文章数量:1304935

I need to get position of element like (with jQuery)

$(".mydiv").position().left;

However I need to do it during css3 translate animation. This animation translate of div position is included in position() data.

Is it possible to get position of element during animation, but position without any translations (just like there would be no animation)?

I need to get position of element like (with jQuery)

$(".mydiv").position().left;

However I need to do it during css3 translate animation. This animation translate of div position is included in position() data.

Is it possible to get position of element during animation, but position without any translations (just like there would be no animation)?

• javascript
• jquery
• css

Share Improve this question Follow asked Jul 3, 2014 at 13:53 Adam PietrasiakAdam Pietrasiak 13.2k1010 gold badges8181 silver badges9696 bronze badges 5

• 5 why not save it in a var, a moment before you start the transition? – Banana Commented Jul 3, 2014 at 13:59
• It's becouse when element has some css animation it starts to play instantly when item is added to DOM, and I can mensure anything AFTER item is added to DOM, so there is no way I can do it 'before' it is animated. – Adam Pietrasiak Commented Jul 3, 2014 at 14:10
• if you are adding the animation manually, then save the position before adding the animation. if the animation is set in css and starts playing as soon as dom loads, then the position is the same one you set in css, or can be calculated if you change it using javascript – Banana Commented Jul 3, 2014 at 14:14
• I think it's only in case first keyframe of animation has no translation. But for example when you have animation like "fade-in-from-left" (that is my case) with translation of 100px to side on the start of animation, this is added to position and its not round number. – Adam Pietrasiak Commented Jul 3, 2014 at 14:22
• ok let me understand, your animation is hardcoded in the css file yes?, i meant, you dont attach the animation using javascript, it is hardcoded in your css file to start as soon as css loads yes? – Banana Commented Jul 3, 2014 at 14:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Edit

"I'm not using .animate for simple animations since css3. – Kluska000"

Should still be able to utilize jquery's animate() start, step, progress callback functions - even though actual animation done at css. e.g., could utilize .animate() at target element - without actually animating the element - only to utilize start, step, progress callback functions; with duration synced to css animations duration . Also, appear that jquery .animate() does not actually require that a target be a DOM element; could be 2 js objects.

See also window.requestAnimationFrame()

https://developer.mozilla/en-US/docs/Web/API/window.requestAnimationFrame

http://www.paulirish./2011/requestanimationframe-for-smart-animating/

Try (see console at jsfiddle, linked below)

  $(function() {
    $(".mydiv").animate({
      left :"0px"
      }, {
      duration : 1234,
      start : function (promise) {
              console.log($(".mydiv").position().left);
      },
      step : function (now, tween) {
              console.log($(".mydiv").position().left); 
      },
      progress : function (promise) {
              console.log($(".mydiv").position().left); 
      },
      plete : function () {
              $(this).animate({left:"0px"}, 1234)
      }
    });  
  });

jsfiddle http://jsfiddle/guest271314/xwL7v/

See http://api.jquery./animate/ at start , step , progress

well, regardless of how you create your animation, i think the best way would be to create an animation class and attach it as soon as dom loads, but only after recording the position for later use.

basically it would give you the same effect as if you set the animation right away, but you will have a record of all the details for later use:

Live Demo: Fiddle

ps: i made the demo for chrome, just change/remove the -webkit- for other browsers as needed:

-webkit-: chrome, safari
-moz-: firefox
-ms- : internet explorer
-o-: opera
without prefix: default

html:

<div id="status_div">&nbsp;</div>
<div id="slider"></div>

css:

* {
    margin:0;
    padding:0;
}
#slider {
    width:100px;
    height:100px;
    display:block;
    background:red;
}
.SliderAnim {
    -webkit-animation:some_animation 2000ms linear forwards;
}
#status_div {
    position:relative;
    left:0;
    top:0;
    width:100%;
    height:auto;
    border:2px solid navy;
    color:black;
}
@-webkit-keyframes some_animation {
    from {
        -webkit-transform:translateX(-100px);
    }
    to {
        -webkit-transform:translateX(100px);
    }
}

js:

$(function () {
    // those are the position and offset before animation was attached
    var pX = $("#slider").position().left;
    var pY = $("#slider").position().top;
    var oX = $("#slider").offset().left;
    var oY = $("#slider").offset().top;
    // those are declarations for vars which will store the position and offset
    // of the element right after attaching the animation, and will result in the values
    // of the first fram of the animation
    var npX = 0;
    var npY = 0;
    var noX = 0;
    var noY = 0;
    // this is a timer function to write the details on the status bar
    setInterval(function () {
        // those are the position and offset of the element during the animation
        var apX = $("#slider").position().left;
        var apY = $("#slider").position().top;
        var aoX = $("#slider").offset().left;
        var aoY = $("#slider").offset().top;
        //print status bar info
        $("#status_div").html("BEFORE ATTACHING ANIMATION position: " + pX + "," + pY + "  offset: " + oX + "," + oY + " <br/> AFTER ATTACHING ANIMATION position: " + npX + "," + npY + "  offset: " + noX + "," + noY + "<br/> DURING ANIMATION position: " + apX + "," + apY + "  offset: " + aoX + "," + aoY);
    }, 100);
    //attach the animation class to the slider div 
    $("#slider").addClass("SliderAnim");
    //record the changed (will result in the first animation frame)
    npX = $("#slider").position().left;
    npY = $("#slider").position().top;
    noX = $("#slider").offset().left;
    noY = $("#slider").offset().top;
});

本文标签： javascriptCSS3JS get position of element during animationStack Overflow