Question

我有一个已应用from django.db.models import CharField, Value from django.db.models.functions import Concat qs = qs.annotate( full_name=Concat( 'user__first_name', Value(' '), 'user__last_name', output_field=CharField() ) ).filter(full_name__icontains=q)的HTML元素。

有没有办法沿y轴设置此元素的动画而不改变沿x轴的平移？

// EDIT

澄清一下，transform: translateX(some_percent)未知，无法访问它。

如果这是可能的，我感兴趣，而不更改html。在我看来，好像翻译总是（x，y）的向量，而translateY只是some_percent的简写。

Answer 1

第一个参数是X轴，第二个参数是Y;）。

transform: translate(50%, 50%);

这是一个jsfiddle：https://jsfiddle.net/fugfswmt/

Answer 2

您可以使用包装元素并为其设置动画：

<强> HTML

<div id="outter">
  <div id="img">

  </div>
</div>

<强> CSS

#img {
  width: 250px;
  height: 150px;
  background-image: url('http://placehold.it/250x150');
  transform: translateX(22%);
}

#outter {
  transform: translateY(40%);
}

<强> JS

var transY = 10;
var times = 0;
var x = function() {
  if (times > 5) {
    times = 0;
  }

    document.getElementById("outter").style.transform = 'translateY(' + times * transY + '%)';
  times++;
  setTimeout(x, 1000);
};

x();

https://jsfiddle.net/nayk1uLz/2/

Answer 3

以下是我使用CSS Custom Property（a.k.a CSS变量）的解决方案提案：

div {
  width: 5rem;
  height: 5rem;
  text-align: center;
  line-height: 5rem;
  transition: transform 300ms;
}

#red {
  background-color: red;
  --some_percent: 24%; /* Default value */
  transform: translateX(var(--some_percent)); /* Unknown value */
}

#red.translate-y {
  transform: translateX(var(--some_percent)) translateY(50%); /* Any value */
}

<!-- Adding a click event just for demo purposes -->
<div id="red" style="--some_percent: 42%" onclick="this.classList.toggle('translate-y')">Click Me</div>

我猜测如果你的some_percent值未知，你是将它设置为内联（经过一些服务器端计算，也许？），所以纯CSS解决方案可能是将此未知值设置为一个CSS变量内联并将其用作translateX上的常量，并将translateY调整为您需要的任何值。

沿一个轴平移元素，同时保持另一个轴

3 个答案: