时间戳

首页 > 解决方案 > 使用关键帧对 mouseleave 进行反向淡入淡出效果

javascript - 使用关键帧对 mouseleave 进行反向淡入淡出效果

问题描述

几天前我问了一个类似的问题，但是我一直在研究这个项目，但遇到了另一个问题。该项目是当鼠标悬停在按钮上时，背景会切换到另一个图像。我已经使用@keyframes 添加了淡入效果，但是它仅在它们进入时有效，我似乎无法找到解决方案。我也不确定为什么在第一次将鼠标悬停在按钮上时背景会闪烁。它只是图像的加载时间吗？当我下载它并在本地链接它时会发生这种情况。您可以在下面看到我的代码和片段，感谢您的帮助！

const switcheroo = document.getElementById('wrapper');
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');

btn1.addEventListener('mouseenter', e => {
    switcheroo.classList.add('keyimg1');
    
});

btn1.addEventListener('mouseleave', e => {
  switcheroo.classList.remove('keyimg1');

});
btn2.addEventListener('mouseenter', e => {
  switcheroo.classList.add('keyimg2');
});

btn2.addEventListener('mouseleave', e => {
  switcheroo.classList.remove('keyimg2');
});
btn3.addEventListener('mouseenter', e => {
  switcheroo.classList.add('keyimg3');
});

btn3.addEventListener('mouseleave', e => {
  switcheroo.classList.remove('keyimg3');
});
*,*::before,*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
#wrapper{
    height: 100vh;
    width: 100%;
    background-position: center center;
    background-size: cover;
    backface-visibility: hidden;
    background-image: url('https://wallpaperaccess.com/full/2029165.jpg');
}
#keydefault{
    -webkit-animation: imgdefault .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
.keyimg1{
    -webkit-animation: img1 .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
.keyimg2{
    -webkit-animation: img2 .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
.keyimg3{
    -webkit-animation: img3 .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes img1{

    100%{
        background-image: url('https://wallpapercave.com/wp/wp2618282.png');
        
    }
}

@-webkit-keyframes img2{
    100%{
        background-image: url('https://images8.alphacoders.com/926/thumb-1920-926492.jpg');
    }
}
@-webkit-keyframes img3{
    100%{
        background-image: url('https://external-preview.redd.it/btq3MWGxjKZFzuASimEuCb0PyvKuHAy1eHEmSWtF5fQ.jpg?auto=webp&s=2735c13f57c7b901336437489322694533d1d3dd');
    }
}
@-webkit-keyframes imgdefault{
    100%{
        background-image: url('https://wallpapercave.com/wp/wp2618282.png');
    }
}

.ulwrapper{
    display: flex;
    height: 100vh;
    align-items: center;
}
ul{
    display: flex;
    width: 100%;
    height: 4rem;
}
li{
    margin: auto;
    cursor: pointer;
}
li a{
    font-size: large;
    font-weight: bolder;
    text-decoration: none;
    color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id='wrapper'>
        
        <div class="ulwrapper">
            
        <ul>
            <li id="btn1"><a>Button1</a></li>
            <li id="btn2"><a>Button2</a></li>
            <li id="btn3"><a>Button3</a></li>
        </ul>
    </div>
    </div>


<script src="app.js"></script>
</body>
</html>

标签： javascripthtmlcss

解决方案

这是一个解决方案，您可以在 js 中添加另一个类mouseleave，这一次让关键帧从当前背景图像返回到默认图像。看一看：

const switcheroo = document.getElementById('wrapper');
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');

btn1.addEventListener('mouseenter', e => {
    switcheroo.classList.add('keyimg1');
    
});

btn1.addEventListener('mouseleave', e => {
 switcheroo.classList.remove('keyimg1');
 switcheroo.classList.remove('keydefault1');
 switcheroo.classList.remove('keydefault2');
 switcheroo.classList.remove('keydefault3');
 switcheroo.classList.add('keydefault1');
});


btn2.addEventListener('mouseenter', e => {
  switcheroo.classList.add('keyimg2');
});

btn2.addEventListener('mouseleave', e => {
  switcheroo.classList.remove('keyimg2');
  switcheroo.classList.remove('keydefault1');
  switcheroo.classList.remove('keydefault2');
  switcheroo.classList.remove('keydefault3');
  switcheroo.classList.add('keydefault2');
});
btn3.addEventListener('mouseenter', e => {
  switcheroo.classList.add('keyimg3');
});

btn3.addEventListener('mouseleave', e => {
  switcheroo.classList.remove('keyimg3');
  switcheroo.classList.remove('keydefault1');
  switcheroo.classList.remove('keydefault2');
  switcheroo.classList.remove('keydefault3');
  switcheroo.classList.add('keydefault3');
});
*,*::before,*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
#wrapper{
    height: 100vh;
    width: 100%;
    background-position: center center;
    background-size: cover;
    backface-visibility: hidden;
    background-image: url('https://wallpaperaccess.com/full/2029165.jpg');
}
.keydefault1{
    -webkit-animation: imgdefault1 .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
.keydefault2{
    -webkit-animation: imgdefault2 .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
.keydefault3{
    -webkit-animation: imgdefault3 .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
.keyimg1{
    -webkit-animation: img1 .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
.keyimg2{
    -webkit-animation: img2 .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
.keyimg3{
    -webkit-animation: img3 .5s linear 0s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes img1{
    100%{
        background-image: url('https://wallpapercave.com/wp/wp2618282.png');  
    }
}

@-webkit-keyframes img2{
    100%{
        background-image: url('https://images8.alphacoders.com/926/thumb-1920-926492.jpg');
    }
}
@-webkit-keyframes img3{
    100%{
        background-image: url('https://external-preview.redd.it/btq3MWGxjKZFzuASimEuCb0PyvKuHAy1eHEmSWtF5fQ.jpg?auto=webp&s=2735c13f57c7b901336437489322694533d1d3dd');
    }
}
@-webkit-keyframes imgdefault1{
    0% {background-image: url('https://wallpapercave.com/wp/wp2618282.png'); }
    
    100%{
        background-image: url('https://wallpaperaccess.com/full/2029165.jpg');
    }
}
@-webkit-keyframes imgdefault2{
    0% {background-image: url('https://images8.alphacoders.com/926/thumb-1920-926492.jpg'); }
    
    100%{
        background-image: url('https://wallpaperaccess.com/full/2029165.jpg');
    }
}
@-webkit-keyframes imgdefault3{
    0% {background-image: url('https://external-preview.redd.it/btq3MWGxjKZFzuASimEuCb0PyvKuHAy1eHEmSWtF5fQ.jpg?auto=webp&s=2735c13f57c7b901336437489322694533d1d3dd'); }
    
    100%{
        background-image: url('https://wallpaperaccess.com/full/2029165.jpg');
    }
}

.ulwrapper{
    display: flex;
    height: 100vh;
    align-items: center;
}
ul{
    display: flex;
    width: 100%;
    height: 4rem;
}
li{
    margin: auto;
    cursor: pointer;
}
li a{
    font-size: large;
    font-weight: bolder;
    text-decoration: none;
    color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id='wrapper'>
        
        <div class="ulwrapper">
            
        <ul>
            <li id="btn1"><a>Button1</a></li>
            <li id="btn2"><a>Button2</a></li>
            <li id="btn3"><a>Button3</a></li>
        </ul>
    </div>
    </div>


<script src="app.js"></script>
</body>
</html>

另外，您闪烁的原因是因为该页面是第一次加载该大图像，并且需要一秒钟才能加载。

推荐阅读