Question

我有一个div我想在两个单独的实例中制作动画：点击时，我希望它在弯曲的路径中移动并保持在最终位置，然后如果再次点击，我希望它回到原来的位置但是遵循相同的弯曲路径。动画的第一部分效果很好，但我无法应用第二部动画。

CSS：

.dot
{
  position: absolute;
  top: 85%;
  left: 80%;
  color: #000000;
}

.dot-up
{
  animation: yAxisUp 1s ease-out;
  animation-fill-mode: forwards;
}

.container
{
  width: 100%;
  height: 100%;
}

.container-up
{
  animation: xAxisUp 1s ease-in;
  animation-fill-mode: forwards;
}

.dot-down
{
  animation: yAxis 1s ease-out;
  animation-fill-mode: forwards;
}

.container-down
{
  animation: xAxis 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes xAxisUp
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(-200px);
  }
}

@keyframes yAxisUp
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(-150px);
  }
}

@keyframes xAxisDown
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(200px);
  }
}

@keyframes yAxisDown
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(150px);
  }
}

jQuery的：

$(".dot").click(function()
{
  $(".dot").toggleClass("dot-up");
  $(".container").toggleClass("container-up");
});

$(".dot-up").click(function()
{
  $(".dot-up").toggleClass("dot-down");
  $(".container-up").toggleClass("container-down");
});

感谢您的帮助！

Answer 1

第一名正如我所说，你需要在toggleClass()之前使用点

第二名使用两次点击活动我认为这不是最佳方式

我认为你需要做这样的事情

＆＃13;

$(".dot").click(function(){
  $(this).toggleClass("dot-up dot-down");
  $(".container").toggleClass("container-up container-down");
});

＆＃13;

.dot
{
  position: absolute;
  top: 85%;
  left: 80%;
  color: #000000;
}

.dot-up
{
  animation: yAxisUp 1s ease-out;
  animation-fill-mode: forwards;
}

.container
{
  width: 100%;
  height: 100%;
}

.container-up
{
  animation: xAxisUp 1s ease-in;
  animation-fill-mode: forwards;
}

.dot-down
{
  animation: yAxis 1s ease-out;
  animation-fill-mode: forwards;
}

.container-down
{
  animation: xAxis 1s ease-in;
  animation-fill-mode: forwards;
}

@keyframes xAxisUp
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(-200px);
  }
}

@keyframes yAxisUp
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(-150px);
  }
}

@keyframes xAxisDown
{
  100%
  {
    animation-timing-function: ease-in;
    transform: translateY(200px);
  }
}

@keyframes yAxisDown
{
  100%
  {
    animation-timing-function: ease-out;
    transform: translateX(150px);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dot dot-down">Dot Div</div>
<div class="container container-down">Container</div>

＆＃13;

请勿忘记html <div class="dot dot-down">和<div class="container container-down">

附加：如果您需要检查附加课程，可以查看 .dot点击事件if($(this).hasClass('dot-top')){//do stuff }
中的内容

Answer 2

jQuery使用点表示法来访问属性和函数您在单击处理程序的选择器上使用它，您还需要在选择器上使用toggleClass函数。

Answer 3

你的jQuery没有选择.dot-up的原因是因为它无法找到它。

您运行代码的那一刻没有.dot-up类存在，因此无法选择。此类后来动态添加到您的html。

你可以这样试试：

$(".dot").click(function() {
  if ($(this).is(".dot-up, .dot-down")) {
    $(this).toggleClass("dot-down").toggleClass("dot-up");
    $(".container").toggleClass("container-up").toggleClass("container-down");
  } else {
    $(this).toggleClass("dot-up");
    $(".container").toggleClass("container-up");
  }
});

Answer 4

感谢在这里评论的每个人，你帮助我更好地理解CSS。我的问题本质上是我使用的动画类型：而不是translateY和translateX我应该使用特定的值，如下所示：

@keyframes up
{
    from
    {
        top: 75%;
    }
    to
    {
        top: 40%;
    }
}

@keyframes down
{
    from
    {
        top: 40%;
    }
    to
    {
        top: 75%;
    }
}

我目前正在使用这个新发现的理解来创建我的最终概念的小代码演示，如果有人有兴趣，我会在这里发布！

再次感谢菜鸟。

<div>上的第二个CSS动画不能使用jQuery toggleClass方法

4 个答案: