我的目標是在顯示和隱藏 HTML 元素時創建影片。顯示和隱藏由切換類隱藏的按鈕觸發。
這是我的代碼：
const button = document.querySelector('button');
const box = document.querySelector('.box');
button.addEventListener('click', () => {
box.classList.toggle('hide');
}).box {
width:200px;
height: 200px;
border: 1px solid #000;
background-color: gray;
margin: 0 auto;
opacity: 1;
display: block;
}
.hide {
display: none;
transition: all 1s ease-out;
opacity: 0;
}<button>Show / Hide</button>
<div class="box hide"></div>uj5u.com熱心網友回復：
如果要使用影片不使用display:none，可以使用visibility
const button = document.querySelector('button');
const box = document.querySelector('.box');
button.addEventListener('click', () => {
box.classList.toggle('hide');
}).box {
width:200px;
height: 200px;
border: 1px solid #000;
background-color: gray;
margin: 0 auto;
opacity: 1;
transition: all 1s ease-out;
visibility: visible;
}
.hide {
visibility: hidden;
transition: all 1s ease-out;
opacity: 0;
}<button>Show / Hide</button>
<div class="box hide"></div>uj5u.com熱心網友回復：
只需display: block從你的隱藏中洗掉，如果你想要影片去 div 顯示也添加影片：
const button = document.querySelector('button');
const box = document.querySelector('.box');
button.addEventListener('click', () => {
box.classList.toggle('hide');
}).box {
width:200px;
height: 200px;
border: 1px solid #000;
background-color: gray;
margin: 0 auto;
opacity: 1;
transition: all 1s ease-out;
display: block;
}
.hide {
transition: all 1s ease-out;
opacity: 0;
}<button>Show / Hide</button>
<div class="box hide"></div>uj5u.com熱心網友回復：
僅洗掉display: none不透明度并為其設定影片不是一個好方法，因為盒子仍然存在并占用空間。
display: none您可以通過收聽animationend事件和切換類來淡入和淡出。
const button = document.querySelector('button');
const box = document.querySelector('.box');
button.addEventListener('click', () => {
const isVisible = box.getAttribute('data-visible') === 'true';
box.classList.remove('show', 'hide');
box.classList.toggle('showing', !isVisible);
box.classList.toggle('hiding', isVisible);
box.addEventListener('animationend', () => {
box.classList.remove('hiding', 'showing');
box.classList.toggle('hide', isVisible);
box.classList.toggle('show', !isVisible);
box.setAttribute('data-visible', !isVisible)
}, {
once: true,
})
}).box {
width: 200px;
height: 200px;
border: 1px solid #000;
background-color: gray;
margin: 0 auto;
}
.show {
display: block;
}
.showing {
animation: showing 1s ease-out;
}
.hide {
display: none;
}
.hiding {
animation: hiding 1s ease-out;
}
@keyframes showing {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes hiding {
from {
opacity: 1;
}
to {
opacity: 0;
}
}<button>Show / Hide</button>
<div data-visible="false" class="box hide"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/468022.html
標籤：javascript html css