是否有可能使用CSS3过渡动画页面加载而不使用Javascript?
这是我想要的，但在页面加载:
image-slider.html
到目前为止我发现了什么
CSS3过渡-延迟，一种延迟元素效果的方法。只适用于悬停。 CSS3关键帧，工作在负载上，但非常慢。正因为如此，它并不有用。 CSS3转换足够快，但页面加载时没有动画效果。
当前回答
类似于@Rolf的解决方案，但忽略了对外部函数的引用或使用类。如果不透明度是保持固定为1一旦加载，只需使用内联脚本直接改变不透明度通过风格。例如
<body class="fadein" onload="this.style.opacity=1">
其中CSS sytle“fadein”是根据@Rolf定义的，定义过渡和设置不透明度为初始状态(即0)
唯一的问题是，这并不适用于SPAN或DIV元素，因为它们没有working onload事件
其他回答
它将在鼠标第一次在屏幕上移动时开始，这主要是在到达后的一秒钟内，这里的问题是它将在离开屏幕时反转。
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
这是我能想到的最好的东西:http://jsfiddle.net/faVLX/
全屏:http://jsfiddle.net/faVLX/embedded/result/
编辑见下面的评论: 这在任何触屏设备上都行不通，因为没有悬停，所以用户只有点击才会看到内容。——里奇·布拉德肖
类似于@Rolf的解决方案，但忽略了对外部函数的引用或使用类。如果不透明度是保持固定为1一旦加载，只需使用内联脚本直接改变不透明度通过风格。例如
<body class="fadein" onload="this.style.opacity=1">
其中CSS sytle“fadein”是根据@Rolf定义的，定义过渡和设置不透明度为初始状态(即0)
唯一的问题是，这并不适用于SPAN或DIV元素，因为它们没有working onload事件
你也可以使用自定义css类(className)来代替css标签。 不需要外部包装。
import React, { useState, useEffect } from 'react';
import { css } from '@emotion/css'
const Hello = (props) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
// For load
setTimeout(function () {
setLoaded(true);
}, 50); // Browser needs some time to change to unload state/style
// For unload
return () => {
setLoaded(false);
};
}, [props.someTrigger]); // Set your trigger
return (
<div
css={[
css`
opacity: 0;
transition: opacity 0s;
`,
loaded &&
css`
transition: opacity 2s;
opacity: 1;
`,
]}
>
hello
</div>
);
};
将此添加到您的CSS淡入动画
body{animation: 2s ease-out 0s 1 FadeIn;}
@keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
如果你想让它加载得更慢，就增加放松时间
如果有人同时做两个过渡有问题，这是我做的。我需要文字从上到下的页面加载。
超文本标记语言
<body class="existing-class-name" onload="document.body.classList.add('loaded')">
超文本标记语言
<div class="image-wrapper">
<img src="db-image.jpg" alt="db-image-name">
<span class="text-over-image">DB text</span>
</div>
CSS
.text-over-image {
position: absolute;
background-color: rgba(110, 186, 115, 0.8);
color: #eee;
left: 0;
width: 100%;
padding: 10px;
opacity: 0;
bottom: 100%;
-webkit-transition: opacity 2s, bottom 2s;
-moz-transition: opacity 2s, bottom 2s;
-o-transition: opacity 2s, bottom 2s;
transition: opacity 2s, bottom 2s;
}
body.loaded .text-over-image {
bottom: 0;
opacity: 1;
}
不知道为什么我一直试图在1个选择器中使用2个转换声明，(不是真的)认为它会使用两者。
