JavaScript - 在display:none和display:block之间添加过渡效果

9 浏览
0 Comments

JavaScript - 在display:none和display:block之间添加过渡效果

我正在使用JavaScript来切换通知，代码如下。

如何在display: block和display: none;之间添加过渡效果？

我不想使用像jQuery这样的外部库，因为我只需要使用toggle效果。

var btn = document.querySelector('button');
btn.addEventListener('click', function(){
  var hint = document.getElementById('hint');
  if(hint.style.display == 'none'){
    hint.style.display = 'block';
  }
  else{
    hint.style.display = 'none';
  }
});

div#hint{
  background: gold;
  color: orangered;
  padding: .5em;
  font-weight: bold;
}

  这是一些关于如何在社区中安全的提示
  这是另一个关于如何在社区中安全的提示

我知道我可以使用像下面这样的jQuery来实现。

$(document).ready(function(){
$('button').click(function(){
$('#hint').toggle('slow');
});
});

div#hint{
      background: gold;
      color: orangered;
      padding: .5em;
      font-weight: bold;
    }


      这是一些关于如何在社区中安全的提示
       这是另一个关于如何在社区中安全的提示

我可以让按钮在#hint切换时逐渐上下移动，就像上面的jQuery示例吗？我不希望按钮从一个位置跳到另一个位置。

0