Question

我使用CSS translate在屏幕上放置一个DIV元素。这样可以正常工作，但是当稍后移动相同的元素时，原始位移将被丢弃。

使用javascript

设置CSS开始位置

div.style.transform ="translate(800px, 400px)";

使用javascript随机设置起始位置后，CSS动画会重新将其重置。

CSS动画

@keyframes testanimation {
  0% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(80px);
  }
}

如何结合CSS翻译，将先前的替换考虑在内？在这种情况下，目标是让动画从随机位置开始。 20px - 80px应该是相对的。

Answer 1

执行此操作的最佳方法我猜测是获取先前的变换，向这些值添加内容然后应用新变换。

另一个建议是使用position，left和top设置元素的位置。例如，使用以下代码：

div.style.position = "absolute";
div.style.left = "800px";
div.style.top = "400px";

这样，变换将应用于该位置，而不是相对于之前的变换。

Answer 2

如果它只是关于变换，那么你需要重置动画中的每个值，否则它将被动画规则覆盖。

示例：

＆＃13;

div {/* translate value reduced to fit in snippet window */
  border:solid;
  height:40px;
  width:40px;
  transform:translatex(180px) translatey(140px);
  animation:2s testanimation forwards;
}
@keyframes testanimation {
  0% {
    transform:translatex(180px) translatey(150px)
  }

  100% {
    transform:translatex(180px) translatey(180px)
  }
}

＆＃13;

<div></div>

＆＃13;

您应用于起始宽度的样式应为：

div.style.transform ="translatex(800px) translatey(400px)";

和动画：

@keyframes testanimation {
  0% {
    transform:translatex(800px) translatey(420px)
  }

  100% {
    transform:translatex(800px) translatey(480px)
  }
}

仅更新translateY值

翻译或定位：relative + coordonates具有相同的效果/结果。

您也可以将它们组合起来

＆＃13;

div {/* value reduced to fit window's demo */
  border:solid;
  height:40px;
  width:40px;
  position:relative;
  transform:translate(80px,40px);
  animation:2s testanimation forwards;
}
@keyframes testanimation {
  0% {
    top : 20px
  }

  100% {
    top:40px
  }
}

＆＃13;

<div></div>

＆＃13;

另一种方式也是如此：

＆＃13;

div {
  /* value reduced to fit window's demo */
  border: solid;
  height: 40px;
  width: 40px;
  position: relative;
  left: 80px;
  top: 40px;
  animation: 2s testanimation forwards;
}

@keyframes testanimation {
  0% {
    transform: translatey(20px)
  }
  100% {
    transform: translatey(40px)
  }
}

＆＃13;

<div></div>

＆＃13;

Answer 3

以上评论的一个例子：

filenames.map(File::new)
    .filter(File::exists)
    .map(f->{
        BufferedReader br = null;
        FileReader fr = null;
        try {
            fr = new FileReader(f)
            br = new BufferedReader(fr);
            return Optional.of(Pair.of(br,fr)) ;
        } catch(Exception e) {}
            return Optional.ofNullable(br);
        })
    .filter(Optional::isPresent)
    .map(Optional::get)
    .flatMap( pair -> { 
        try {
            // do something with br               
        } finally {
             try {
                 pair.getRight().close();
             } catch (IOException x ){
                 throw new RuntimeException(x) ;
             }
        }
    })

#wrapperDiv {
  width: 100px;
  height: 100px;
  background: green;

  transform: translate(400px, 200px) rotate(50deg);
}

#yourDiv {
  width: 100px;
  height: 100px;
  background: red;
  
  animation: testanimation 2s infinite;
}

@keyframes testanimation {
  0% {
    transform: translateY(20px) rotate(0deg);
  }

  100% {
    transform: translateY(80px) rotate(40deg);
  }
}

<div id="wrapperDiv"> <div id="yourDiv"> <div> <div>将获得相对于其父div#yourDiv转换的转换。

Answer 4

我认为更通用的解决方案是解析css转换属性，因为这样可以让您保持动画元素而不必担心其状态。

这是我用于此案例的解决方案：

parseTransformMatrix = function(str){
  const match_float = "[+\\-]?(?:0|[1-9]\\d*)(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?"
  const match_sep = "\\s*,?\\s*"
  m = str.match(RegExp(`matrix\\((${match_float}(?:${match_sep}${match_float})*)\\)`))
  if(!m || !m.length || m.length < 2) return null
  return m[1].match(RegExp(match_float, 'g')).map(x => parseFloat(x))
}
// Test parseTransformMatrix method
console.log(parseTransformMatrix("matrix(1, 0, 0, 1, 96.2351, 309.123)"));

getElementTranslate = function(e){
  let t = e.css("transform")
  let r = { left: 0, top: 0 }
  if(!t) return r
  mat = parseTransformMatrix(t)
  if(!mat || !mat.length || mat.length != 6) return r
  r.left = mat[4]
  r.top = mat[5]
  return r
}

在这里，e是一个jQuery元素，但如果您不想拥有此依赖项，则可以轻松使用getPropertyValue。

使用这些功能，您可以执行以下操作：

let t = getElementTranslate(e)
e.css({transform:`translate(${t.left+20}px,${t.top+80}px)`})

如何将CSS翻译添加到现有翻译？

4 个答案: