I have a child inside a parent and I would like to animate child from its start position to page bottom into fixed position. Obviously animation is not "full" because position changes from absolute to fixed when animation starts, which I understand breaks the animation. Would this be possible to achive somehow ? I dont mind some more html if necessary.

  var a = document.querySelector('.mini')

  document.body.addEventListener('click', function() {

    a.classList.add('hov')

  })

.parent {
  position: absolute;
  left: 0;
  top: 0;
  background: #ccc;
  height: 300px;
  width: 300px;

}

.mini {
  position: absolute;
  bottom: 200px;
  right: 0;
  background: orange;
  height: 100px;
  transition: all 0.5s;
  width: 300px;

}

.hov {
  position: fixed;
  bottom: 0;
  right: 0;

}

<div >
  <div >

    <div >Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.</div>

  </div>
</div>

CodePudding user response：

You could change the bottom and right properties within the animation and then use setTimeout to add another class to change the position to fixed after the animation time is done.

also the transition would be on the .hov instead of .mini

  var a = document.querySelector('.mini')

  document.body.addEventListener('click', function() {

    a.classList.add('hov')

    setTimeout(() => {
      a.classList.add('change-position')
    }, 500)
  })

.parent {
  position: absolute;
  left: 0;
  top: 0;
  background: #ccc;
  height: 300px;
  width: 300px;

}

.mini {
  position: absolute;
  bottom: 200px;
  right: 0;
  background: orange;
  height: 100px;
  width: 300px;

}

.hov {
  transition: all 0.5s;
  bottom: 0;
  right: 0;
}

.change-position {
  position: fixed;
}

CodePudding user response：

An approach I've used is animating the element while it still has absolute positioning, then right after it's done animating, add a fixed position value to it.

And to achieve this, the element is first appended to the body, so it can move within the bounds of the document, which is basically the entire screen. And in case the element is to be returned back to it's original position, the takeMeBack() function does the whole job, which in this case every successive click either does the animation or undoes it.

var a = document.querySelector('.mini')
var p = document.querySelector('.parent')

let counter = 1;
document.body.addEventListener('click', function() {

    /* Obsolete Section -- Use in case tweaking position is needed
    when element is not at the edge of the page*/
    let pos_childTop = a.offsetTop;
    let pos_childLeft = a.offsetLeft;
    let pos_parentTop = p.offsetTop;
    let pos_parentLeft = p.offsetLeft;
    
    let absLeft = pos_childLeft   pos_parentLeft;
    let absTop = pos_childTop   pos_parentTop;

    // console.log(absLeft)
    // console.log(absTop)
    /* End of tweaking section */
    
    if(counter%2 != 0){
        // make the body its parent
        document.body.appendChild(a);
        a.style.setProperty('--right-location', 'calc(100% - 300px)');
        a.style.setProperty('--bottom-location', 'calc(100% - 100px)');

        a.classList.add('hov');
        setTimeout(() => {
            a.style.position = "fixed";
        }, 1001)
        // give fixed position after placement in document
    }
    else {
        // Take element back to its original position
        // And make the '.parent' div its parent again
        takeMeBack();
    }

    counter  ;
})

function takeMeBack(){
    p.appendChild(a);
    a.classList.remove('hov')
    a.style.position = "absolute";
    // revert element's position
}

:root {
    --right-location: 0;
    --bottom-location: 0;
}

body {
    padding: 0;
    margin: 0;
}

.parent {
    position: absolute;
    left: 0;
    top: 0;
    background: #ccc;
    height: 300px;
    width: 300px;
}

.mini {
    position: absolute;
    bottom: 200px;
    right: 0;
    background: orange;
    height: 100px;
    width: 300px;
}

.hov {
    animation: shift 1s forwards;
}

@keyframes shift {
    from { right: var(--right-location); bottom: var(--bottom-location); }
    to { right: 0px; bottom: 0px; }
}

#revert {
    position: fixed;
    top: 0;
    right: 0;
}

<body>
    <div >
        <div >
        
            <div >Maecenas eu erat condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.</div>
        
        </div>
    </div>
</body>