使用 css 显示/隐藏脚本的动画

Question

我想为隐藏块 (id = "help") 添加淡入/淡出效果。如何使用纯 css 为块设置动画？另外，我想在点击后为 link (id = "show) 制作动画。请帮忙给我一些例子。

查看我的代码：

    var showElem = document.getElementById("show");
    var hideElem = document.getElementById("hide");
    var helpDiv = document.getElementById("help");

    helpDiv.style.display = 'none';
    hideElem.style.visibility = 'hidden';

    showElem.onclick = function() {
      showElem.style.visibility = 'hidden';
      hideElem.style.visibility = 'visible';
      helpDiv.style.display = 'block';
    };

    hideElem .onclick = function() {
      hideElem.style.visibility = 'hidden';
      showElem.style.visibility = 'visible';
      helpDiv.style.display = 'none';
    };

div#help { 
    border: 1px solid black;
    height: 200px;
    width: 300px;
    padding: 10px;
    margin-top: 10px;
  }

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

</head>
<body>
  <a href="#" id="show">SHOW</a>
  <a href="#" id="hide">HIDE</a>
  <div id="help"></div>
</body>
</html>

Answer 1

如果您使用 jQuery:

jsfiddle: https://jsfiddle.net/0j9qbj7p/4/

HTML

  <a href="#" id="show">SHOW</a>
  <a href="#" id="hide">HIDE</a>
  <div id="help">Text here</div>

CSS

#hide, #help{
  display: none;
}

#help{
  background-color: blue;
  height: 400px;
}

jQuery

$showElem = $('#show');
$hideElem = $('#hide');
$helpElem = $('#help');

    $showElem.click(function(){
        $helpElem.slideDown();
        $hideElem.show();
    });

    $hideElem.click(function(){
        $helpElem.slideUp();
        $hideElem.hide();
    });

Answer 2

为了使用纯 CSS 的动画，您必须使用“@keyframes”来控制框的不透明度（以模拟淡入/淡出效果）。只需将其添加到 CSS 文件的顶部：

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

但之后，您还必须通过将此行添加到您的代码来显示您想要动画的项目：

div#help { 
    border: 1px solid black;
    height: 200px;
    width: 300px;
    padding: 10px;
    margin-top: 10px;
    background:grey /* it is important to give a background color*/
    animation-name: FadeAnimation; /* the name of the keyframes */
    animation-duration:0.5s /* the duration time */
    animation-iteration-count:1; /* how many time to repeat */
  }

您可以对方框内的字词进行同样的操作。

Answer 3

试试这个：

$(document).ready(function(){
  $("#show").click(function(){
    $('.help').addClass('sh');
    $(this).css('opacity',0)
    $("#hide").css('opacity',1)
  })

  $("#hide").click(function(){
    $('.help').removeClass('sh');
     $(this).css('opacity',0)
    $("#show").css('opacity',1)
  })
})

#hide, #show, .help {
    transition: all 1s;
}
.help { 
    border: 1px solid black;
    height: 200px;
    width: 300px;
    padding: 10px;
    margin-top: 10px;
    opacity: 0;
  }

  #hide {
   opacity: 0;
  }

 .sh {
    opacity: 1;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<a href="#" id="show">SHOW</a>
<a href="#" id="hide">HIDE</a>
<div class="help" class="sh"></div>

使用 css 显示/隐藏脚本的动画

Animation to show / hide script using css

javascript

css

jquery-animate