如何在点击动画css时隐藏div答案

【问题标题】：How to hide the div on click through animation css如何在点击动画css时隐藏div
【发布时间】：2016-09-23 23:47:15
【问题描述】：

我正在尝试基于 css 动画显示和隐藏 div，但是一旦单击按钮，我需要完全隐藏，它应该与动画一起发生。

目前它是动画但没有隐藏。

这是我尝试过的。

document.getElementById('toggle').onclick = function(evt) {
  var eSib = evt.target.previousElementSibling.className;
  if(evt.target.previousElementSibling.className.indexOf('slideDown')>=0){
  	evt.target.previousElementSibling.className = 'slideUp';
  }
  else{
  	evt.target.previousElementSibling.className = 'slideDown';
  }
}

.slideDown{
    animation-name: pullDown;
    -webkit-animation-name: pullDown;

    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
    0% {
        transform: scaleY(0.1);
    }
    40% {
        transform: scaleY(1.02);
    }
    60% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(1);
    }
}

@-webkit-keyframes pullDown {
    0% {
        -webkit-transform: scaleY(0.1);
    }
    40% {
        -webkit-transform: scaleY(1.02);
    }
    60% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(1);
    }
}

.slideUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp;

    animation-duration: 1.1s;
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;

    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
}

@keyframes pullUp {
    0% {
        transform: scaleY(0.98);
    }
    100% {
        transform: scaleY(0);
    }
}

@-webkit-keyframes pullUp {
    0% {
        -webkit-transform: scaleY(0.98);
    }
    100% {
        -webkit-transform: scaleY(0);
    }
}

<div class="slideDown">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
</div>
<button id="toggle">Slide Up/Down</button>

【问题讨论】：

纯粹出于好奇，顺便说一句……你为什么不为evt.target.previousElementSibling 取别名？有很多不必要的代码要阅读，只是说...

标签： javascript html css

【解决方案1】：

您可以在 .slideUp 类中使用 animation-fill-mode: forwards; 来保持动画完成后的状态。

.slideUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;

animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;

animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;

transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;

animation-fill-mode: forwards;
}

下面是它的实际操作：https://jsfiddle.net/3m353906/

供应商前缀和更多信息可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

【讨论】：

【解决方案2】：

使用animation-fill-mode 保持动画的最终状态。

-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;

工作版本：

document.getElementById('toggle').onclick = function(evt) {
  var eSib = evt.target.previousElementSibling.className;
  if (evt.target.previousElementSibling.className.indexOf('slideDown') >= 0) {
    evt.target.previousElementSibling.className = 'slideUp';
  } else {
    evt.target.previousElementSibling.className = 'slideDown';
  }
}

.slideDown {
  animation-name: pullDown;
  -webkit-animation-name: pullDown;
  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}
@keyframes pullDown {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }
}
.slideUp {
  animation-name: pullUp;
  -webkit-animation-name: pullUp;
  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}
@keyframes pullUp {
  0% {
    transform: scaleY(0.98);
  }
  100% {
    transform: scaleY(0);
  }
}
@-webkit-keyframes pullUp {
  0% {
    -webkit-transform: scaleY(0.98);
  }
  100% {
    -webkit-transform: scaleY(0);
  }
}

<div class="slideDown">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>
</div>
<button id="toggle">Slide Up/Down</button>

【讨论】：