时间戳

首页 > 解决方案 > 使用 CSS 或 JS 通过 Javascript 定时可见性后淡入

javascript - 使用 CSS 或 JS 通过 Javascript 定时可见性后淡入

问题描述

我有一个图像消失（通过javascript）然后在我的页面上淡出（通过CSS），然后一旦发生这种情况，我就有一个带有文本的div，一旦图像消失就会出现。我希望做并且遇到问题的是使 5 秒后出现的文本以淡入淡出的方式出现在 ... html/js 中，如下所示：


<script type="text/javascript">
var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg'];
    
function getRandomImage(imgAr, path) {
    path = path || 'images/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}
</script>

</head>
<body>
   
<div id="welcomeImage" class="fadeout">
    <script type="text/javascript">getRandomImage(random_images_array, 'images/')</script>
</div>


<div id="introText" class="animated fadeIn">
    <p>Div with Text</p>
</div>

<script type="text/javascript">window.setTimeout("document.getElementById('welcomeImage').style.display='none';", 4000); </script>
<script type="text/javascript">
function showIt() {document.getElementById("introText").style.visibility = "visible";}
setTimeout("showIt()", 5000); </script>

</body>
</html>

CSS：

.fadeout {
    animation: fadeOut 1s forwards; 
    animation-delay: 3s;
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

/* One option I tried that did not work out

.fadein {
    animation: fadeIn 3s forwards;  
    animation-delay: 5s;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
*/

/*my most current attempt at fadein through CSS */

.animated { 
    animation-duration: 3s; 
    animation-fill-mode: both; 
    animation-delay: 5;
} 

@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    animation-name: fadeIn; 
}

#introText {
    width: auto; 
    padding: 100px;
    visibility: hidden;
    text-align: center;
    height: auto;
}
'''

Am i able to add a fade-in transition into the visibility script? I tried doing a fade in with CSS but could not get it to work.

I do not know the JS to add it to my script and have tried searching for it but could not find anything for my specific situation.

If anyone sees anything I could fix in my CSS to make it fade in properly (maybe a timing issue?) or know how I can include a fade-in in my script making the text visible it would be much appreciated!

Thanks!!

标签： javascripthtmlcss

解决方案

也许visibility您可以将displayfrom切换none到，而不是切换block。

看看这里：

.fadeout {
    animation: fadeOut 1s forwards; 
    animation-delay: 3s;
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

/* One option I tried that did not work out

.fadein {
    animation: fadeIn 3s forwards;  
    animation-delay: 5s;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
*/

/*my most current attempt at fadein through CSS */

.animated { 
    animation-duration: 3s; 
    animation-fill-mode: both; 
} 

@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    animation-name: fadeIn; 
}

#introText {
    width: auto; 
    padding: 100px;
    display: none;
    text-align: center;
    height: auto;
}
<script type="text/javascript">
var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg'];
    
function getRandomImage(imgAr, path) {
    path = path || 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fr.ddmcdn.com%2Fs_f%2Fo_1%2FAPL%2Fuploads%2F2014%2F10%2Fintro-cats-at-home-324x205.jpg&f=1&nofb=1'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}
</script>


<body>
   
<div id="welcomeImage" class="fadeout">
    <script type="text/javascript">getRandomImage(random_images_array, 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fr.ddmcdn.com%2Fs_f%2Fo_1%2FAPL%2Fuploads%2F2014%2F10%2Fintro-cats-at-home-324x205.jpg&f=1&nofb=1')</script>
</div>


<div id="introText" class="animated fadeIn">
    <p>Div with Text</p>
</div>

<script type="text/javascript">window.setTimeout("document.getElementById('welcomeImage').style.display='none';", 4000); </script>
<script type="text/javascript">
function showIt() {document.getElementById("introText").style.display = "block";}
setTimeout("showIt()", 5000); </script>

</body>

推荐阅读