使用CSS轻松地将不同的动画应用于div,如果可能的话使用JS?

问题描述 投票:0回答:2

如果我在页面上有20个按钮,并且每个按钮都应将不同的动画应用于特定的HTML元素,是否可以通过CSS轻松地为另一个元素定义动画,如果没有其他选项可以通过JavaScript进行设置?

例如,

#group1 {
   display:flex;
   flex-direction: row;
}
#group2 {
   width:100px;
   height:100px;
   background-color: gray;
   animation: animation1 1s ease-out;
}

@keyframes animation1 {

  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }

}

@keyframes animation2 {

  0% {
    opacity: 0;
    background-color: red;
  }
  100% {
    opacity: 1;
    background-color: blue;
  }

}

@keyframes animation3 {

  0% {
    opacity: 0;
    background-color: purple;
  }
  100% {
    opacity: 1;
    background-color: orange;
  }

}
<div id="group1"> 
<button>Animation 1</button>
<button>Animation 2</button>
<button>Animation 3</button>
</div>

<div id="group2"> 

</div>

当按下按钮时,我希望元素使用与其相关的过渡。

您可以为CSS中的另一个元素定义过渡吗?

#group2 {
   width:100px;
   height:100px;
   background-color: gray;
}

#button2 {
    animation-target: #group2 animation2 1s ease-out;
}

@keyframes #Group2 animation3 {

  0% {
    opacity: 0;
    background-color: purple;
  }
  100% {
    opacity: 1;
    background-color: orange;
  }
javascript html css css-animations
2个回答
0
投票
您可以使用CSS varibales设置animation属性并使用setProperty()

var group2 = document.getElementById('group2'); function changeAnimation(e) { group2.style.setProperty('--anim', `animation${e.id}`); }
:root {
  --anim: animation1;
}

#group1 {
  display: flex;
  flex-direction: row;
}

#group2 {
  width: 100px;
  height: 100px;
  background-color: gray;
  animation: var(--anim) 1s ease-out;
}

@keyframes animation1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes animation2 {
  0% {
    opacity: 0;
    background-color: red;
  }
  100% {
    opacity: 1;
    background-color: blue;
  }
}

@keyframes animation3 {
  0% {
    opacity: 0;
    background-color: purple;
  }
  100% {
    opacity: 1;
    background-color: orange;
  }
}
<div id="group1">
  <button id="1" onclick="changeAnimation(this)">Animation 1</button>
  <button id="2" onclick="changeAnimation(this)">Animation 2</button>
  <button id="3" onclick="changeAnimation(this)">Animation 3</button>
</div>

<div id="group2">

</div>

0
投票
如果可以自由编辑HTML代码,请考虑结合使用~选择器的标签/输入技巧

#group1 { display: flex; flex-direction: row; } #group2 { width: 100px; height: 100px; background-color: gray; animation:none 1s ease-out } #anim1:checked ~ #group2 { animation-name: animation1; } #anim2:checked ~ #group2 { animation-name: animation2; } #anim3:checked ~ #group2 { animation-name: animation3; } label { -webkit-appearance:button; -moz-appearance:button; padding:5px; } input{ display:none; } @keyframes animation1 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes animation2 { 0% { opacity: 0; background-color: red; } 100% { opacity: 1; background-color: blue; } } @keyframes animation3 { 0% { opacity: 0; background-color: purple; } 100% { opacity: 1; background-color: orange; } }
<div id="group1">
  <label for="anim1" >Animation 1</label>
  <label for="anim2" >Animation 2</label>
  <label for="anim3" >Animation 3</label>
</div>
<input id="anim1" type="radio" name="anim">
<input id="anim2" type="radio" name="anim">
<input id="anim3" type="radio" name="anim">
<div id="group2">

</div>
© www.soinside.com 2019 - 2024. All rights reserved.