css-transitions 相关问题

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

Css - 在 scrollbar-thumb 伪元素中应用过渡

我想在将鼠标悬停在 div 中的 scroll-y 上时应用一个简单的过渡效果！当我将鼠标悬停在 ::-webkit-scrollbar-thumb 上时，会应用效果，除了过渡

html css css-animations css-transitions

回答 0 投票 0

下拉菜单的 CSS 转换在响应式菜单的移动/汉堡视图中不起作用

如果您最近从我这里读到类似的内容，我深表歉意，但我已经更改了很多代码并遇到了不同的问题，并且想重新开始而不是不断地重新编辑和

drop-down-menu css-transitions

回答 0 投票 0

“高度：适合内容”没有 CSS 转换

我使用 transition: height 500ms 将动画添加到通过按钮从 height: 0 到 height: 100px 滑动打开的元素，反之亦然。由于元素的内容是动态添加的，所以我 ...

css animation css-transitions transition slide

回答 5 投票 0

z-index 和 translate 3d 在 chrome 和 safari 中的工作方式不同

我遇到浏览器兼容问题，发现它是由 Google chrome 和 Safari 处理 z-index 并以不同方式翻译 3D 引起的。我在这里做一个最小的例子：我遇到浏览器兼容问题，发现它是由 Google chrome 和 Safari 处理 z-index 并以不同方式转换 3D 引起的。我在这里做一个最小的例子： <div> <div style="background-color: blue; height: 100px; width: 100px; position: absolute; transform: translate3d(10px, 10px, 10px)"></div> <div style="background-color: red; height: 100px; width: 100px; position: relative; z-index: 1"></div> </div> 这个简短的 html，在 Safari 和 Google Chrome 中显示不同。我可以知道哪个是期望的行为吗？我应该如何正确地同时使用 z-index 和 transform？我尝试了不同的浏览器并做了一个最小的例子。 Safari 也将 translate3d 属性作为浏览器中的一个图层工作，并且它具有这种不同的显示方法，因此如果您将元素与 z-index 和其他元素与 translateZ，translateZ 或 translate3d 将在 z-index 元素上工作所以，为了避免 safari 出现问题，我建议您使用 translateY 和 translateX 方法，如下面的评论所示这里有更多关于 Safari 的信息：https://bugs.webkit.org/show_bug.cgi?id=61824 例子： .box { height: 100px; width: 100px; } .blue { background-color: blue; position: absolute; /** this works in safari **/ transform: translateY(10px) translateX(10px); transform: translate3d(10px, 10px, 10px); } .red { background-color: red; position: absolute; /** this desn't work in safari */ /** transform: translate3d(0, 0, 9px); */ /** need this to work with safari */ /** transform: translate3d(0, 0, 11px); */ z-index: 1; } <div> <div class="box blue"></div> <div class="box red"></div> </div>

html css css-transitions z-index

回答 1 投票 0

使用 chrome 的 View Transition API 翻转动画不能平滑地动画背景颜色

我有一个简单的 div，它有背景颜色和文本。状态更改后，我更新 DOM 中的此元素以具有不同的背景颜色和文本（通过 HTMX 完成）。我想用 Chrome...

html css css-animations css-transitions

回答 1 投票 0

CSS 过渡适用于 li 元素但不适用于 div

我正在使用 CSS 和 vanilla javascript 构建一个可点击的响应式下拉菜单。它的工作效率为 99.99% - 可能足以使用 - 但引擎盖下发生了一些奇怪的事情。我想要 dro...

drop-down-menu responsive-design css-transitions html-lists

回答 0 投票 0

div css 过渡只有一种方式，然后就忘了它

所以我有这个 div，我想在悬停时平滑地缩放它。一切顺利，顺利做大。然而，当我将鼠标移开后，它会立即恢复到正常状态...

html css css-transitions

回答 2 投票 0

Vue JS 3 中的图像如何进行过渡？

我一直无法使用 Vue JS 3 将淡入淡出过渡应用于图像。过渡适用于文本，但图像只是加载和呈现，就像通常没有过渡应用程序一样......

vue.js vuejs3 css-transitions vue-transitions ihtmlimgelement

回答 1 投票 0

有什么方法可以使 Tailwind 旋转过渡有效？

我正在尝试平滑地旋转这个 V 形图标：我正在努力顺利旋转这个chevron-icon： <app-icon name="chevron-left" class="w-[18px] ml-6 mr-2 text-slate-500 transition-all" :class="{ 'rotate-180': store.accountMenu }" /> 这是一个svg： <div v-else-if="name === 'chevron-left'"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L10 16l10 10" /> </svg> </div> 通过使用顺风 transition-all 类和一个 rotate-180 类，该类通过 vue 3 condition 有条件地应用。过渡有效，但仅当图标从右向左旋转回来时才有效，而不是当它最初应该从左向右旋转时。

vue.js vuejs3 tailwind-css css-transitions

回答 0 投票 0

按钮的点击/移动解决方案显示与“悬停”的链接

我有一组按钮，它们在悬停时翻转以显示链接。我想我也可以修改它们以在触摸设备上工作，但我正在努力。理想情况下，我希望移动/触摸用户是...

javascript html css hover css-transitions

回答 1 投票 0

How to zoom on text on hover using scss and html

我是 html 的新手，我对目前的悬停效果很好奇。我希望悬停时的文本在 0.2 秒内放大 1.5。它什么也没做。这可能是 scss 标题的问题。我写这个.. <

html css sass hover css-transitions

回答 2 投票 0

切换到位置固定导航时平滑过渡

寻找一种方法来平滑从 position: relative 到 position: fixed 的过渡。目前正在跳跃位置。请建议一种方法来做到这一点。这是一个例子： var offset = 做...