css-transitions 相关问题

CSS Transitions允许CSS值的属性更改在指定的持续时间内平滑发生。

为什么我无法为自定义属性（又名 CSS 变量）设置动画？

看这个动画：金色 div 有一个自定义属性动画的动画（@keyframes roll-o-1 动画 --o）。这是分步动画的。银色 div 有一个动画，其中一个也不...

css css-transitions css-animations css-variables

回答 5 投票 0

布局更改时的过渡

布局更改过渡我有一个父容器，里面有两个子元素：child1 和 child2。父容器的显示属性设置为“flex”，方向为“行”，但对于

html css css-transitions

回答 1 投票 0

我怎样才能有一个弹出菜单箭头，在悬停和单击时在指向左和右之间进行转换？

我有一个弹出菜单，默认情况下应该隐藏，并且在鼠标悬停和单击时出现在触发按钮（红色圆圈）的左侧，如下所示：这是代码： // HTML 我有一个弹出菜单，默认情况下应该隐藏，并且在鼠标悬停和单击时出现在触发按钮（红色圆圈）的左侧，如下所示：这是代码： // HTML <li id="daily-muster-statuses"> <div id="daily-muster-statuses-menu" class="lpx-context-menu pb-0"> <div class="lpx-user-ctx-body"> <ul id="muster-status-list" class="lpx-nav-menu ps"> <li id="muster-status-list-header" class="m-0 mb-2 outer-menu-item p-0"> <span id="muster-status-list-header-icon" class="lpx-menu-item-icon"> <i class="lpx-icon bi bi-card-checklist"></i> </span> <span class="lpx-menu-item-text">Daily Muster</span> </li> </ul> </div> </div> <ul id="daily-muster-statuses-rollup" class="lpx-nav-menu"> <li class="m-0 outer-menu-item"> <a class="d-block lpx-menu-item-link text-center"> <i class="dd-icon bi bi-chevron-left" aria-hidden="true"></i> <i id="roll-up-status" class="fa fa-circle bg-rollup-waiting"></i> </a> </li> </ul> </li> // CSS #daily-muster-statuses-menu { opacity: 0; visibility: hidden; } #daily-muster-statuses:hover > #daily-muster-statuses-menu { opacity: 1; visibility: visible; } .dd-icon { bottom: 2.5px; left: 12px; opacity: 1; transition: transform 0.1s linear; } .outer-menu-item:hover .dd-icon { transform: rotate(180deg); } .show + #daily-muster-statuses-rollup .dd-icon { transform: none; } // JS const musterStatusesRollup = $('#daily-muster-statuses-rollup'); const musterStatusesMenu = $('#daily-muster-statuses-menu'); const musterStatusesChevron = musterStatusesRollup.find('.dd-icon'); let menuIsShown = false; const hideDailyMusterStatusesMenu = () => { musterStatusesChevron.removeClass('bi-chevron-right'). addClass('bi-chevron-left'); musterStatusesMenu.removeClass('show'); return (menuIsShown = false); }; const initialiseDailyMusterStatusesMenu = () => { // Open the daily muster statuses context menu upon clicking its rollup icon in the // right sidebar, then collapse it when clicking it again, or clicking anywhere else musterStatusesRollup.on('click', e => { if (menuIsShown) { return hideDailyMusterStatusesMenu(); } e.stopPropagation(); musterStatusesChevron.removeClass('bi-chevron-left'). addClass('bi-chevron-right'); musterStatusesMenu.addClass('show'); menuIsShown = true; $(document).one('click', hideDailyMusterStatusesMenu); }); }; 它几乎可以工作，但是当您单击汇总图标时，V 形图标会在关联的 JS 运行时四处移动。我希望在鼠标按下时，浏览器开始表现得好像 CSS 转换规则从未存在过一样，但会保持指向右的 V 形，直到鼠标松开并再次完全单击（其间有任意数量的鼠标移动）。然后，在第二次单击后，V 形图标应转换回左侧。我在网络上的许多下拉/弹出菜单上看到了这种行为，似乎我使代码过于复杂......所以任何有关这方面的帮助将非常感激。要将其更改为隐藏，您需要使用 display: none; 进行 onclick 以显示您需要使用的 function demo { document.getElementById("").style.display = "block"; } 但要保持它在那里尝试 function toggleVisibility() { var div = document.getElementById("myDIV"); if (div.style.visibility === "hidden") { div.style.visibility = "visible"; } else { div.style.visibility = "hidden"; } } #myDIV { width: 200px; height: 100px; background-color: lightblue; border: 1px solid black; } <button onclick="toggleVisibility()">Toggle Visibility</button> <div id="myDIV" style="visibility: hidden;">This is my DIV element.</div>

javascript html jquery css-transitions popupmenu

回答 1 投票 0

集中与主屏幕宽度和高度相关的弹出窗口

我创建了弹出窗口并将它们链接到页脚中，当用户单击并出现弹出窗口时，无论屏幕大小，它都应该水平和垂直居中于我的屏幕。什么也没有...

javascript html css html5-canvas css-transitions

回答 1 投票 0

与主屏幕宽度和高度问题相关的弹出窗口居中

我创建了弹出窗口并将它们链接到页脚中，当用户单击并出现弹出窗口时，无论屏幕大小，它都应该水平和垂直居中于我的屏幕。什么也没有...

javascript html css html5-canvas css-transitions

回答 1 投票 0

CSS Transition 动画消耗大量 CPU/GPU

我正在我的网站上实现一个小效果。 DOM 元素之一的大小随机变化。 const theDiv = document.getElementById("the-div"); 函数动画（）{ 常量值 = Math.floor(

html css performance css-transitions

回答 1 投票 0

如何在 CSS 中的图像悬停效果上创建图像叠加

我想创建类似的效果，如下图所示。它应该支持不同尺寸的图像和图像叠加。我已经成功创建了上述效果，但是图像

html css image css-transitions

回答 2 投票 0

链接上的 css3 过渡在加载时显示蓝色

在我的网站 (http://amosjackson.com) 上，导航链接使用 css 过渡来在用户将鼠标悬停在其上时更改颜色。尽管在样式表中将颜色设置为白色，但当页面

html css css-transitions

回答 4 投票 0

toggleClass 后不同的 CSS 过渡

大家好我最近制作了这支笔 https://codepen.io/alexyap/full/MmYvLw/，我被我的导航菜单难住了。当它过渡时它工作正常，但当它淡出时看起来很糟糕......

jquery css css-transitions

回答 1 投票 0

css3 高度过渡不起作用

我在使用 css3 过渡时遇到问题我怎样才能让过渡顺利它立即出现我希望当我将鼠标悬停在 div 框上时，它会慢慢改变其高度 html代码我在使用 css3 过渡时遇到问题我怎样才能让过渡平滑它立即出现我希望当我将鼠标悬停在 div 框上时，它会慢慢改变其高度 html代码 <div id="imgs"> <img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" /> <img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" /> <img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" /> <img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" /> <img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" /> <img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" /> <img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" /> <img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" /> <img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" /> <img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" /> <img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" /> <img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" /> </div> jsfiddle 我相信你需要设置一个指定的高度而不是自动。 http://jsfiddle.net/BN4Ny/ 这可以顺利扩展。但不确定你是否想要那种小的关闭打开效果。我刚刚分叉了你的 jsfiddle 并添加了指定的高度。这个解决方案不需要javascript，也没有需要预先确定容器高度的问题。这是通过使用 max-height 属性并将其值设置为较高值来实现的。 #imgs { border:1px solid #000; border-radius:3px; max-height:20px; width:100%; overflow:hidden; transition: 2s ease; } #imgs:hover { max-height:15em; } <div id="imgs"> <img src="https://picsum.photos/seed/picsum/400/600" /> </div> 您可以将图像放在列表项中，然后在 li 上进行转换，而不是在容器上使用设定的高度或使用 JS（这都是尴尬的解决方案）。如果所有图像的高度相似，则意味着容器内的内容仍然可以是动态的。例如... /* CLOSED */ div.container li { height:0px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} /* OPEN */ div.container:hover li { height:30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} 以下是具体操作方法：http://jsfiddle.net/minitech/hTzt4/ 不幸的是，为了保持灵活的高度，JavaScript 是必需的。我正在使用这个方法：使用最大高度来过渡高度而不是直接高度... 例如： div { height: auto; max-height:0; } .toggle-above-div:hover div { max-height:0; } 使用 grid，您可以使用过渡，而无需向元素添加特定高度。 document.querySelector("button").addEventListener("click", e => { document.querySelector(".wrapper").classList.toggle("open") }) .content{ min-height: 0; text-align: justify; } .wrapper{ display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 200ms; width: 300px; } .wrapper.open { grid-template-rows: 1fr; } <button>Toggle</button> <div class="wrapper"> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quantum Aristoxeni ingenium consumptum videmus in musicis? Tum Quintus: Est plane, Piso, ut dicis, inquit. Duo Reges: constructio interrete. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Satis est tibi in te, satis in legibus, satis in mediocribus amicitiis praesidii. Quamquam tu hanc copiosiorem etiam soles dicere. Hoc est non modo cor non habere, sed ne palatum quidem. Non est ista, inquam, Piso, magna dissensio. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quod cum dixissent, ille contra. </div> </div>

html css css-transitions

回答 6 投票 0

如何让 CSS 关键帧在按下按钮时播放？

我有一个在 5 个关键帧中播放的 CSS 动画。但是，我想将这些关键帧绑定到一个按钮。。水{ 宽度：162px；高度：162 像素；背景颜色：#1D89E7；边界半径...

html css css-selectors css-animations css-transitions

回答 1 投票 0

尝试通过 JavaScript 执行 CSS 转换是行不通的

当我尝试通过 JavaScript 执行 CSS 转换时，它们对我不起作用。这是我的 HTML 代码当我尝试通过 JavaScript 执行 CSS 转换时，它们对我不起作用。这是我的 HTML 代码 <div class="search-icon"> <i class="fas fa-search search-icon-header"></i> <img src="images/close-icon.svg" alt="close-icon-search" class="close-icon-search"> </div> <div class="search-bar" id="search-bar"> <div class="search-container"> <form class="search-form"> <input type="text" placeholder="Search..."> <button type="submit"><i class="fas fa-search search-icon-action"></i></button> </form> </div> </div> 这是我在 JavaScript 中的函数： let isSearchBarOpen = false; function toggleSearchBar() { if (isSearchBarOpen) { searchBar.style.display = "none"; } else { searchBar.style.display = "flex"; searchBar.classList.add("search-bar-open") } isSearchBarOpen = !isSearchBarOpen; toggleSearchIcon(); } 当搜索栏打开时，会添加 .search-bar-open 类。现在是CSS： .search-bar { display: none; background-color: #000; color: #fff; position: absolute; top: 0; left: 0; right: 0; padding: 10px 5px; z-index: 1000; margin: 0 auto; transition: top 2s ease-in; } .search-bar-open { top:90px; } 单击搜索按钮时，会发生以下情况（或者如果我没记错的话应该发生）：该函数检查 isSearchBarOpen 是否为 true 或 false。如果 true（即，如果搜索栏打开），则会添加内联样式 (display:none) 隐藏搜索栏。如果是 false（即，如果搜索栏已关闭），则会添加内联样式 (display:flex) 以使其显示。此外，还添加了一个类 (.search-bar-open)。从那里，如果我们看一下 CSS…… 搜索栏打开时（显示时）会加载 .search-bar-open 类和 display:flex 内联样式。一方面，所述内联样式通过特定性覆盖通过 display:none 类应用的 .search-bar CSS 属性。此外，还添加了 .search-bar-open 类。现在，我假设，当应用.search-bar-open类时，应该发生.search-bar中规定的转换，即： a.我在top:0;… b. 2 秒后，ease-in… c.我已经准备好了top:90px;。我一定是误解了一些东西，因为它不起作用:-( 如果您使用 JS 使元素可见并添加类来触发转换，则它将不起作用，因为 JS 同时执行这两个操作。如果元素上的属性发生更改，则会触发转换，但像这样完成，top属性永远不会更改，当元素变得可见时它已经存在了。您可以在两者之间添加 JS 操作来触发浏览器“重排”。这样，浏览器首先使元素可见，在页面上绘制该元素，然后添加类以触发转换。 searchBar.style.display = "flex"; searchBar.offsetWidth; searchBar.classList.add("search-bar-open")

javascript html css css-transitions dom-manipulation

回答 1 投票 0

更改我的作品集网站的鼠标光标圆圈比例

我尝试寻找一些教程来创建自定义圆形光标，该光标也隐藏普通鼠标光标。我这样做了，我也有一个我想要的不同的混合模式。问题是我

javascript html css hover css-transitions

回答 1 投票 0

转换：translateZ 仅在转换完成后应用

我是否遇到了导致渲染错误的边缘情况，或者我是否编写了一些糟糕的CSS？为了复制这一点，我编写了以下演示： body 元素嵌套一个具有跨度的方形 div

css css-transitions css-transforms

回答 1 投票 0

背景滤镜模糊的过渡导致深色插入边框（仅限 Chrome 和 Windows）

在背景过滤器上的过渡期间，我注意到一个黑暗的插入阴影，仅在过渡期间可见。看来这只发生在 Windows（10 和 11）上基于 chrome/webkit 的浏览器中：我的