如何让一个CSS的动画不管哪个元素调用动画只对ONE元素生效

Question

我是 CSS 动画的新手，这是我的代码

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

我希望上面的代码无论在哪里调用都只对#menu 生效，对于EG：它是在单击按钮时调用的，但只影响#menu 元素。有点像但对按钮没有任何作用

button:focus{animation-name: fadeOut;
animation-duration: 4s;}

@keyframes fadeOut{
  #menu{0% {opacity: 1;}}
  #menu{100% {opacity: 0;}}
}

但是上面的代码在CSS中是非法的，因此我不能使用它。有没有其他方法可以做到这一点。

提前致谢。

Answer 1

据我了解，您必须将动画添加到您的元素中，例如：

/* The animation code */

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

在你的情况下它将是：

 #menu {
  animation-name: fadeOut;
  animation-duration: 4s;
}

您可以将 4s 更改为您想要的持续时间。

Answer 2

您可以使用 JavaScript:

示例 1
在此示例中，我们为每个 element 添加一个 event，每个 event 调用 animation function 为 #menu 元素设置样式。

let menu = document.getElementById('menu');
let btn = document.querySelector('.btn');
let p = document.querySelector('.p');
let box = document.querySelector('.box');



function animateIt(){
  menu.style.animation = 'fade 1s';
  
  setTimeout(function(){ 
     menu.style.animation = 'unset';
  }, 1000);
}


btn.addEventListener('click', (e) => {
  animateIt();
});


p.addEventListener('click', (e) => {
  animateIt();
});

box.addEventListener('click', (e) => {
  animateIt();
});

#menu {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-bottom: 20px;
  opacity: 0;
}

.box {
  background-color: blue;
  color: #fafafa;
  width: 200px;
}

@keyframes fade{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div id="menu"></div>

<button class="btn">Click</button>
<p class="p">Or Click Here</p>
<div class="box">Or Click Even Here</div>

示例 2
在这个例子中，我们简单地添加 elements 将具有 events，animates #menu 在 array of objects 与 class name 和 the event listener 每一个。每个 element 和它的 event 基本上都会将 样式和动画 的 animateIt() function 称为 #menu。

您所要做的就是为每个将调用 animation 的 element 添加一行，仅包括 class name 和调用它的 event。

// Get the #menu 
let menu = document.getElementById('menu');

// Gather the elements in an array of objects including the class name and the event
let elements = [
  {class: ".btn", evt: "click"},
  {class: ".p", evt: "click"},
  {class: ".box", evt: "mouseover"}
];


for(let i = 0; i < elements.length; i++){ 
  // Get the element
  let theTarget = document.querySelector(elements[i].class);
  // Get the event
  let targetEvt = elements[i].evt;
  
  // Add event for each element to call the animation function
  theTarget.addEventListener(targetEvt, (e) => {
    animateIt();
  });
}


// The animation function that styles (animate) the #menu 
function animateIt(){
  menu.style.animation = 'fade 1s';
  
  setTimeout(function(){ 
     menu.style.animation = 'unset';
  }, 1000);
}

#menu {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-bottom: 20px;
  opacity: 0;
}

.box {
  background-color: blue;
  color: #fafafa;
  width: 200px;
}

@keyframes fade{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div id="menu"></div>

<button class="btn">Click Here</button>
<p class="p">Or Click Here</p>
<div class="box">Or Hover Here</div>

如何让一个CSS的动画不管哪个元素调用动画只对ONE元素生效

How to make a CSS animation take effect only on ONE element no matter which element calls the animation

html

css

css-animations