Javascript-Transition

Question

我有一个简单的JavaScript脚本来显示和隐藏。

<script type="text/javascript">
function show(obj) {

var el = document.getElementById(obj);
var bota = document.getElementById("show");

    bota.style.visibility = 'hidden';
    el.style.display = 'block';

}
</script>

我该如何进行过渡？谢谢！

Answer 1

您可以这样进行fadeIn-fadeOut：

const btnFadeToggle = document.getElementById('btnFadeToggle')
const show = document.getElementById('show')
const fade = document.getElementById('fade')

btnFadeToggle.addEventListener('click', function(e) {
  fadeToggle(show)
  fadeToggle(fade)
})

const fadeToggle = (obj) => {
  obj.classList.toggle('display')
}

.text {
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

.text.display {
  opacity: 1
}

<div id="show" class="text display">BOTA: This text appears and disappears on click of the button.</div>
<div id="fade" class="text">OTHER: This text appears and disappears on click of the button.</div>

<button id="btnFadeToggle">FADE TOGGLE</button>