gpt4 book ai didi

css - 我可以通过 ":hover"和 ":active"以外的选择器触发 CSS 转换吗?

转载 作者:行者123 更新时间:2023-12-04 12:01:22 24 4
gpt4 key购买 nike

我正在通过 sololearn.com 学习 CSS3 中的过渡,其中给出的使用过渡的唯一示例与 :hover 一起使用。选择器。

我能找到的所有其他东西都使用那个或 :active没有解释可以使用哪些其他选择器或为什么不显示这两个以外的选择器作为示例。

有没有办法在没有用户交互的情况下开始转换?或者这需要 JavaScript 吗?

最佳答案

tl;博士
您可以使用任何选择器来启动 transition ,但你真的不需要它。您只需要:

  • 设置 transition元素上的属性
  • 更改要转换的属性的值。

  • 您可以在不使用 CSS 选择器的情况下完成上述两种操作,这只不过是一种可用于设置 DOM 元素属性的便捷方法。

    初步答复 transition 合作任何选择器 .但是它们与任何选择器都没有关系,并且您实际上不需要选择器来执行 CSS 转换。
    所有您需要的 transition工作是设置以下过渡属性:
  • transition-duration ,
  • transition-delay ,
  • transition-timing-function
  • transition-property . (必须是动画过渡到工作)。

  • 在此之后,每当在 transition-property 中命名的属性在两个动画值之间改变它的值,初始值和设定值之间的变化根据集合 transition发生。特性。
    无论是什么触发了过渡属性的值的变化,都会发生这种情况
    它可以:
  • 更改是因为特定的 CSS 选择器(您定义的)开始或停止应用(匹配元素);
  • 直接使用 JavaScript 进行更改。

  • 或者,当然,通过两者的组合(即使用 JavaScript 来应用一个类,这会改变正在转换的属性的值)
    因此,实际上,您的问题的答案是: transition s 与任何选择器一起工作,但它们也可以在没有选择器的情况下工作。它们基于 DOM 元素属性值工作,与任何选择器无关 .
    演示 transition 的常用方法正在使用 :hover状态,因为在选择器之间切换(即控制/演示/观察转换)所需要做的就是。嗯,……悬停!

    在:

    For example is there a way to start transitions without interaction from the user?


    当然有!一个非常基本的例子是在 <body> 上添加一个类。当所有页面资源加载完毕时。
    <body>元素被创建,它没有类,当所有资源都完成加载时, Windowonload事件触发。我们可以使用这个事件来添加类。如果在 body 上正确定义了转换并且因为更强的选择器现在应用于元素,transitioned 属性会发生变化,过渡就会发生。无需任何用户交互。
    看到它工作:

    window.onload = function() {
    document.querySelector('body').classList.add('loaded')
    }
    body {
    background-color: #fff;
    transition: background-color 1s linear;
    }
    .loaded { background-color: #212121;}

    您还可以设置一个递归函数,该函数切换元素的状态并在设定的时间后调用自身,在设定的时间后以连续循环有效地将状态切换回:
    对于上面的例子,这意味着:

    window.onload = toggleBodyClass;
    function toggleBodyClass() {
    document.querySelector('body').classList.toggle('loaded');
    setTimeout(toggleBodyClass, 1234);
    }
    body {
    background-color: #fff;
    transition: background-color 1s linear;
    }
    .loaded { background-color: #212121;}


    如果问题是:“选择器能否在不使用 JavaScript 和/或用户交互的情况下开始/停止应用?”它真的翻译成:
    “除了通常会触发 transition 之外,是否还有其他东西触发了转换?”,可能的答案有以下不同:
    “你为什么想知道?” “是否有没有 JavaScript 和/或用户交互的网页浏览?”

    关于css - 我可以通过 ":hover"和 ":active"以外的选择器触发 CSS 转换吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47718700/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com