固定元素与动画CSS后错误的位置 [英] fixed element with wrong position after animation CSS

问题描述

在这里，我创建了 jsFiddle ，它可以复制我的问题

动画后（点击MOVE两次），固定列回到错误的位置。

可以不使用 left 或 right 用于固定位置元素？

解决方案

已更新jsfiddle http://jsfiddle.net/z8fBD/7/ p>

Trick是在#body上添加重置翻译

  #body {
 position：absolute; 
 left：0; 
 top：0; 
 width：200px; 
 -webkit-transition：all 0.5s ease; 
 -moz-transition：all 0.5s ease; 
 -o-transition：all 0.5s ease; 
 -ms-transition：all 0.5s ease; 
 transition：all 0.5s ease; 
 -webkit-transform：translate（0％，0px）; 
 -moz-transform：translate（0％，0px）; 
 -ms-transform：translate（0％，0px）; 
 -o-transform：translate（0％，0px）; 
 transform：translate（0％，0px）; 
} 
  

Here I created jsFiddle which kind of replicates my problem

After animation (clicking on MOVE twice), fixed column comes back with wrong position.

is it possible to animate my this without using left or right for fixed positioned element?

解决方案

Updated jsfiddle http://jsfiddle.net/z8fBD/7/

Trick is to add reset translate on #body

#body {
    position:absolute;
    left: 0;
    top:0;
    width: 200px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translate(0%,0px);
    -moz-transform: translate(0%,0px);
    -ms-transform: translate(0%,0px);
    -o-transform: translate(0%,0px);
    transform: translate(0%,0px);
}

这篇关于固定元素与动画CSS后错误的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！