加载Css3过渡动画?

是否有可能使用CSS3过渡动画页面加载而不使用Javascript?

这是我想要的，但在页面加载:

image-slider.html

到目前为止我发现了什么

CSS3过渡-延迟，一种延迟元素效果的方法。只适用于悬停。 CSS3关键帧，工作在负载上，但非常慢。正因为如此，它并不有用。 CSS3转换足够快，但页面加载时没有动画效果。

当前回答

你也可以使用自定义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>
    );
};

2021-02-20 21:34:10

其他回答

类似于@Rolf的解决方案，但忽略了对外部函数的引用或使用类。如果不透明度是保持固定为1一旦加载，只需使用内联脚本直接改变不透明度通过风格。例如

<body class="fadein" onload="this.style.opacity=1">

其中CSS sytle“fadein”是根据@Rolf定义的，定义过渡和设置不透明度为初始状态(即0)

唯一的问题是，这并不适用于SPAN或DIV元素，因为它们没有working onload事件

2014-08-04 15:34:16

如果有人同时做两个过渡有问题，这是我做的。我需要文字从上到下的页面加载。

超文本标记语言

<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个转换声明，(不是真的)认为它会使用两者。

2019-09-23 13:30:30

我想我已经找到了一种解决OP问题的方法，而不是一开始就过渡。load'的页面-我发现使用一个动画的不透明度淡入有同样的效果，(我正在寻找与OP相同的东西)。

所以我想让正文从白色(与网站背景相同)渐隐到页面加载的黑色文本颜色-我只从周一开始编码，所以我正在寻找一个'上。load'风格的东西代码，但不知道JS -所以这是我的代码，为我工作得很好。

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

不管出于什么原因，这只对.class的#id不起作用(至少对我的不起作用)

希望这有助于-我知道这个网站帮助我很多!

2016-02-19 14:17:35

这是一个棘手的问题。

答案是“不太可能”。

CSS不是一个功能层。它不知道发生了什么，什么时候发生。它只是用来为不同的“标志”(类、id、状态)添加一个表示层。

默认情况下，CSS/DOM不提供任何类型的“on load”状态供CSS使用。如果你想要/能够使用JavaScript，你会分配一个类到body或其他东西来激活一些CSS。

话虽如此，你可以为此创建一个黑客。我在这里举个例子，但它可能适用于你的情况，也可能不适用。

我们假设“接近”就是“足够好”:

<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

下面是我们的CSS样式表的摘录:

.onLoad
{
    -webkit-animation:bounceIn 2s;
}

我们还假设现代浏览器是渐进呈现的，所以我们的最后一个元素是最后呈现的，所以这个CSS是最后激活的。

2011-07-24 07:25:26

CSS只有延迟3s

这里有几点需要注意:

一次调用多个动画我们创建一个等待动画，它只是延迟实际的动画(在我们的例子中是第二个动画)。

代码:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

2019-10-24 16:06:13

加载Css3过渡动画?

推荐文章

最新文章

标签