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

Question

我想在隐藏块中添加淡入/淡出效果(id = "help")。如何使用纯css动画块？此外，我想动画链接(id =“显示)后，点击。请帮助，并给我一些例子。

请看我的代码：

​

    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

尝试如下：

​

$(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>

​

Answer 2

如果您使用的是jQuery：

小提琴手：https://jsfiddle.net/0j9qbj7p/4/

  <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 3

为了使用带有纯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 */
  }

​

你也可以对方框中的单词做同样的处理。