import "./Test.scss"
const Test = () => {
function addClass(){
const el=document.querySelector(".test")
if(el){
el.classList.add("active")
}
}
function removeClass(){
const el=document.querySelector(".test")
if(el){
el.classList.remove("active")
}
}
return (
<div className='my-container'>
<button className='btn btn-primary btn-lg' onClick={addClass}></button>
<button className='btn btn-danger btn-lg' onClick={removeClass}></button>
<div className='test'>Test</div>
</div>
)
}
export default Test
.test{
margin: 200px;
background-color: red;
display:none;
width:300px;
height:300px;
transition: all 3s linear;
transition-behavior: allow-discrete;
&:hover{
opacity: 1;
display: block;
}
&.active{
display: block;
}
}
@starting-style {
.test {
opacity: 0;
}
}
.my-container{
height:600px;
width:100dvw
}
import "./Test.scss"
const Test = () => {
function addClass(){
const el=document.querySelector(".test")
if(el){
el.classList.add("active")
}
}
function removeClass(){
const el=document.querySelector(".test")
if(el){
el.classList.remove("active")
}
}
return (
<div className='my-container'>
<button className='btn btn-primary btn-lg' onClick={addClass}></button>
<button className='btn btn-danger btn-lg' onClick={removeClass}></button>
<div className='test'>Test</div>
</div>
)
}
export default Test
.test{
margin: 200px;
background-color: red;
display:none;
width:300px;
height:300px;
transition: all 3s linear;
transition-behavior: allow-discrete;
&:hover{
opacity: 1;
display: block;
}
&.active{
display: block;
}
}
@starting-style {
.test {
opacity: 0;
}
}
.my-container{
height:600px;
width:100dvw
}