问题标签 [css-transitions]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - 动画 div 背景图像
我有一个<div>
:
在这<div>
我有页面的完整正文。
我也有两门课:
我在体内有一个图像:
我需要的是:当光标移到div.mover
,div#MDive
的类上hide2
时会出现动画。
ie:div#MDive
的背景图片变为第二张带有动画效果的图片
javascript - CSS过渡回调
CSS 转换完成后是否可以获得通知(如回调)?
css - webkit css 过渡
在网站上尝试一些 webkit 转换并遇到了问题。我的链接上的悬停状态添加了 1px 边框并减少了填充,以便定位保持不变。正常工作,但当我添加过渡时却不行。显然,由于我只进行了 1px 的更改,它会突然发生,但不会同时发生 - 边框之前的填充会发生变化,所以整个事情都会“摇晃”。
我发现解决这个问题的最好方法是在正常状态下设置一个白色边框,这样它只会改变颜色,但我希望它是透明的。另外,有没有办法在不设置白色背景颜色的情况下从白色而不是黑色淡化背景颜色?再一次,我希望它是透明的,但它看起来很奇怪变灰然后变黄!
我的导航菜单上也有过渡,并且发生了同样的事情(这次改变了填充和边距):
嗯,只是尝试将值提高一点,即使使用线性过渡将边距和填充更改为 15 像素,仍然会产生一个小故障(看起来像 1 或 2 像素)。同样的事情发生在 safari 和 chrome 中。
有人知道如何使它顺利吗?还是解决颜色问题?认为使用 jquery 会更好(忽略跨浏览器支持!)?可能会去看看歌剧是否会发生同样的事情......
编辑:似乎 Mac 的 10.5a 歌剧版本仍然不支持过渡......
css - CSS3 webkit 淡出工具提示
我刚刚尝试了一个 CSS 工具提示,它会随着 CSS3 的过渡而淡入。我想要一个工具提示效果,当您悬停链接时,工具提示会出现,但仅使用 CSS3 会淡入淡出。
我已经让它工作到一定程度,但由于某种原因,当我将鼠标悬停在它应该在的位置时,它会激活,即使它最初是定位的left:-999px;
。
所以基本上,我做错了什么/我想要的可能是什么?(注意我不想用 JS/JQuery 做任何事情,只是想看看我是否可以用 CSS 做)
您可以在此处查看和使用它。
css - -webkit- 与 -moz-transition
我在我的网站上使用 CSS3 过渡,并且 -webkit- 似乎可以正常工作,而 -moz- 则不行。
这是CSS:
只需使用 jQuery 将 mousedown 类添加到文章中。
知道我哪里出错了吗?
javascript - CSS3 过渡事件
元素是否触发了任何事件来检查 css3 转换是否已经开始或结束?
css - 在许多选择器中使用一些 CSS 属性,而无需编辑 HTML 或使用 JS
CSS:
HTML:
目标是使每个具有类“bananaClass”的元素都继承“bananaTrans”的属性,而无需编辑 HTML 或使用 JavaScript。
它(“bananaTrans”)不需要完全是一个类,它只是在其他选择器中使用的一堆属性。
css - 使用 Javascript 激活 Webkit CSS3 动画
当按下按钮时,我希望使用 Webkit CSS3 将绝对定位的 DIV 从屏幕上的一个位置移动到另一个位置,方法是更改其左右 CSS 属性。但是,我看到的所有执行此操作的示例都使用静态 CSS 规则来应用此转换。
我事先不知道新的位置,那么如何动态应用这个 CSS3 过渡呢?
css - CSS3 淡入淡出效果
..目前它具有向上/向下滚动效果,但我希望背景随着淡入淡出效果改变,我应该在 CSS 中改变什么?
谢谢!
css - CSS display 属性上的转换
我目前正在设计一个 CSS 'mega dropdown' 菜单 - 基本上是一个常规的纯 CSS 下拉菜单,但包含不同类型的内容。
目前,CSS 3 过渡似乎不适用于 'display' 属性,也就是说,您不能进行任何类型的从display: none
to display: block
(或任何组合)过渡。
当有人将鼠标悬停在顶级菜单项之一上时,是否有办法让上例中的二级菜单“淡入”?
我知道您可以在visibility:
属性上使用转换,但我想不出一种有效使用它的方法。
我也尝试过使用高度,但这只是失败了。
我也知道使用 JavaScript 实现这一点很简单,但我想挑战自己只使用 CSS,我想我有点短。