Javascript CSS制作：活动切换_Javascript_Jquery_Html_Css

Javascript CSS制作：活动切换

javascript jquery html css

Javascript CSS制作：活动切换,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试创建一个web演示文稿，并希望添加一个由两个半部分组成的小动画，该动画在单击时上下移动（到目前为止仍然有效），但我也希望它们在单击后保持不变这是我的代码：HTML <body> <a href="#" id="btn_logo" onclick="return false"> <div id="animation"> <div id="logo"> </div>

我正在尝试创建一个web演示文稿，并希望添加一个由两个半部分组成的小动画，该动画在单击时上下移动（到目前为止仍然有效），但我也希望它们在单击后保持不变

这是我的代码：HTML

    <body>
    <a href="#" id="btn_logo" onclick="return false"> <div id="animation">      
            <div id="logo"> </div>  
            <div id="up"> </div>
            <div id="down"> </div>
        </div></a>

及

如何在动画结束后切换动画？

您应该做的是在CSS类上设置动画，然后单击添加或删除CSS类

像这样：

（与您的html完全相同）：

这里的关键点是动画：

#up, #down {
  background: #000;
  position:absolute;
  right:0;
  left:0;
  width:100%;
  height:25px;
  transition: top 0.25s;
}

#up.moveUp {
  top: 25px;
}
#down.moveDown {
  top: 100px;
}

以及添加类的相关JS：

$('#click').on('click', function(){
  $('#up').addClass('moveUp');
  $('#down').addClass('moveDown');
});

您应该做的是让它在CSS类上设置动画，然后只需单击添加或删除CSS类

像这样：

（与您的html完全相同）：

这里的关键点是动画：

#up, #down {
  background: #000;
  position:absolute;
  right:0;
  left:0;
  width:100%;
  height:25px;
  transition: top 0.25s;
}

#up.moveUp {
  top: 25px;
}
#down.moveDown {
  top: 100px;
}

以及添加类的相关JS：

$('#click').on('click', function(){
  $('#up').addClass('moveUp');
  $('#down').addClass('moveDown');
});

这样做：

$（文档）.ready（函数（）{
$（'#动画'）。在（'单击'，函数（）上）{
$（'.up，.down'）.addClass（'animated'）；
});
});
#动画{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景：黄色；
}
.标志{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
高度：50px；
宽度：50px；
背景：红色；
边界半径：50%；
保证金：0自动；
}
.起来{
位置：绝对位置；
排名：0；
右：0；
底部：50%；
左：0；
背景：绿色；
}
.下来{
位置：绝对位置；
最高：50%；
右：0；
底部：0；
左：0；
背景：蓝色；
}
.向上{
底部：100%；
前-50%；
过渡：所有1s线性；
}
.下来{
最高：100%；
底部-50%；
过渡：所有1s线性；
}
执行以下操作：

$（文档）.ready（函数（）{
$（'#动画'）。在（'单击'，函数（）上）{
$（'.up，.down'）.addClass（'animated'）；
});
});
#动画{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景：黄色；
}
.标志{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
高度：50px；
宽度：50px；
背景：红色；
边界半径：50%；
保证金：0自动；
}
.起来{
位置：绝对位置；
排名：0；
右：0；
底部：50%；
左：0；
背景：绿色；
}
.下来{
位置：绝对位置；
最高：50%；
右：0；
底部：0；
左：0；
背景：蓝色；
}
.向上{
底部：100%；
前-50%；
过渡：所有1s线性；
}
.下来{
最高：100%；
底部-50%；
过渡：所有1s线性；
}

能否显示动画的CSS？CSS动画定义通常是运行一次动画，除非指定更长。您将需要Javascript来监视事件。因为您需要JS来完成这项工作，所以我只使用jQuery的animate方法，因为它有自己的完成回调。你能为动画展示你的CSS吗？CSS动画定义通常是运行一次动画，除非指定更长。您将需要Javascript来监视事件。因为您需要JS来完成这项工作，所以我只使用jQuery的animate方法，因为它有自己的完成回调。因为到目前为止我还没有对js做过太多的经验，我该如何添加这个呢？我将div“动画”与“上”和“下”分开“然后我将onclick与js代码连接起来，这样它就为动画添加了类？你可以保留包装器div，如果你愿意的话，那没关系。Javascript只用于将其他CSS类添加到元素中，从而激活CSS动画。@MarcelSchulz这里有一个使用与您完全相同的HTML的示例：（只需单击栏）我将如何重新调整CSS？现在我有“上下”和“btn”徽标：活动的“下”和“btn”徽标：活动的“上”和“上”我需要像你那样制作css吗？@MarcelSchulz取下：活动的伪选择器。解决方案的重要部分是，您有另一个类，该类将修改您试图设置动画的属性，然后您将添加该类。由于我对js没有太多的经验，我到底如何添加该类？我将div“动画”与“上”和“下”分开“然后我将onclick与js代码连接起来，这样它就为动画添加了类？你可以保留包装器div，如果你愿意的话，那没关系。Javascript只用于将其他CSS类添加到元素中，从而激活CSS动画。@MarcelSchulz这里有一个使用与您完全相同的HTML的示例：（只需单击栏）我将如何重新调整CSS？现在我有“上下”和“btn”徽标：活动的“下”和“btn”徽标：活动的“上”和“上”我需要像你那样制作css吗？@MarcelSchulz取下：活动的伪选择器。解决方案的重要部分只是，您有另一个类，该类将修改您尝试设置动画的属性，然后添加该类。