Question

我想为隐藏的块添加淡入/淡出效果（id =＆＃34; help＆＃34;）。如何使用纯CSS动画块？此外，我想在点击后为链接设置动画（id =＆＃34; show）。请帮忙，给我一些例子。

请参阅我的代码：

＆＃13;

    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';
    };

＆＃13;

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

＆＃13;

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

＆＃13;

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显示/隐藏脚本的动画

3 个答案: