css-transitions相关内容

使用单个 DOM 元素修复响应式顶部导航/关闭画布导航

让我们先摆脱麻烦(建立在基础响应式框架): Fiddle 1:一个导航​​元素，但当侧面导航滑出时变得不固定 Fiddle 2:工作但有多个导航 好吧，我一直在绞尽脑汁，试图为以下问题开发优雅的解决方案: 1) 制作一个响应式、固定的导航，在较小的屏幕尺寸上从顶部拉伸切换到从侧面滑出(如 Facebook 应用) 2) 我想使用相同的 DOM 元素进行导航，而不是使用 ..

发布时间：2022-01-04 18:33:41 dom navigation responsive-design css-transitions zurb-foundation 其他开发

如何在没有 JavaScript 库的情况下检测转换结束?

我想在用 CSS 转换完成动画后删除一个对象，但我无法使用 JavaScript 库. 如何检测动画何时完成?我是否以某种方式使用了回调或自定义事件? 解决方案 element.addEventListener('transitionend', function(event) {alert("CSS 属性完成:" + event.propertyName);}， 错误的 ); 目前 ..

发布时间：2022-01-03 08:51:04 javascript callback css-transitions custom-event 前端开发

React JS:如何为条件渲染的组件设置动画?

Example 是一个功能组件，我在其中有条件地渲染 div.我希望这个 div 在有条件地呈现时淡入，反之亦然淡出. 为此，我维护了两个本地状态变量:render 和 fadeIn，它们是根据传递给 show 的 prop 计算的strong>示例组件. 我所做的是: 当 show 支持 true 时，我将 render 设置为 true，因此 div 有条件地呈现，在 10m ..

发布时间：2021-12-31 16:24:59 css reactjs react-hooks css-transitions conditional-rendering 前端开发

是否可以为 Flexbox 插入动画制作动画?删除?

当我从 flexbox 中移除一个项目时，剩余的项目会立即“对齐"到它们的新位置而不是动画. 从概念上讲，由于项目正在改变它们的位置，我希望转换能够应用. 我已经为所有涉及的元素(flexbox 和子元素)设置了 transition 属性 有什么方法可以对 flexbox 进行动画编辑(添加和删除)?这对我来说实际上是一个亮点，也是 flexbox 的一个缺失部分. 解决 ..

发布时间：2021-12-31 13:04:08 css css-transitions css-animations flexbox 前端开发

Chrome 中的字体粗细 CSS 转换

尝试使用 CSS 使 font-weight 优雅地从“400"过渡到“600"，但它在 Chrome 中似乎不起作用.这是一个已知的错误还是我做错了什么? 查看 Fiddle 此处的示例 解决方案 基于大量测试，Chrome 和 IE-10 目前不支持字体粗细动画.这在未来可能会改变. ..

发布时间：2021-12-30 11:05:49 css google-chrome fonts css-transitions 前端开发

如何具有平滑效果的 window.scrollTo()

我可以使用以下方法滚动到 200px btn.addEventListener("点击", function(){window.scrollTo(0,200);}) 但我想要平滑的滚动效果.我该怎么做? 解决方案 2018 更新 现在你可以只使用 window.scrollTo({ top: 0, behavior: 'smooth' }) 来让页面滚动得更流畅. cons ..

发布时间：2021-12-29 10:48:39 javascript css scroll css-animations css-transitions 前端开发

CSS 从无显示到显示块的过渡，反之亦然

我知道这个问题在 SO 中可能被问过数百万次，但我已经尝试了大部分解决方案，我只是不知道为什么它对我不起作用. 所以我有一个带有 display 的下拉菜单，最初针对 none.当我点击它时，它显示了很好的过渡.(到现在为止还挺好).但是当我再次单击它以隐藏下拉菜单时，它会立即隐藏，但我不想要那样.我想用分配给显示的类似过渡来隐藏.这是我的 CSS 代码: .dropdown-menu ..

发布时间：2021-12-28 19:23:02 html css drop-down-menu css-transitions css-animations 前端开发

为什么 Ember.run afterRender 不适用于 CSS 过渡?

据我所知，处理 CSS 过渡的一种方法是使用 Ember.run.scheduleOnce('afterRender') 但是，对我来说，如果不添加超时，它就不起作用.这是在 Ember 1.0.0 View = Em.View.extend({didInsertElement:函数(){Ember.run.scheduleOnce('afterRender', this, 'animat ..

发布时间：2021-12-26 16:02:56 ember.js css-transitions 其他开发

iOS CSS 不透明度 + 可见性过渡

在桌面浏览器(JSFiddle)中查看以下测试: a {背景:灰色；显示:块；边距:100px；填充:100px；}跨度{不透明度:0；-webkit-transition: 0.5s;可见性:隐藏；}a:悬停跨度{不透明度:1；-webkit-transition: 0.5s;可见性:可见；} a span 您将鼠标悬停在锚点元 ..

发布时间：2021-12-22 23:45:04 css ios mobile safari css-transitions 移动开发

使用 CSS3 触摸事件的悬停效果

我使用 CSS3 悬停和过渡来显示和隐藏图像.在移动设备上，我想对触摸事件使用相同的转换. 基本上，第一次触摸将执行悬停效果或翻转，而触摸将执行滚动. 我不想使用 JavaScript 来执行此操作.如果有一种方法可以用纯 CSS3 做到这一点，那将是最好的选择. 解决方案 在你的 css 中使用 :active 伪类，然后添加 ontouchstart="" 和 onmous ..

发布时间：2021-12-22 23:26:34 mobile css css-transitions 前端开发

什么更快?CSS3 过渡还是 jQuery 动画?

我正在开发一个 iPad HTML5 应用程序，我已经实现了 ontouch 支持以更快地触发事件，我正在使用 jQuery 来更轻松地定位元素，但是对于动画我使用的是 CSS3 转换 你认为什么更快?使用 jQuery 动画，因为我已经导入了库或在使用 jQuery 定位元素时使用 CSS3 转换? 解决方案 根据 this链接，jQuery 动画比 css 动画慢得多. 原 ..

发布时间：2021-12-20 20:31:07 jquery ipad css css-transitions 前端开发

Firefox 背景图像的 CSS3 转换不起作用

我的背景图像转换在 Chrome 中运行良好，但在 Firefox 中不起作用.我是 CSS3 过渡的新手.做了研究，我的语法似乎是正确的.从我读到的 FF 应该支持这一点.我在 FF 12.0 上.为什么这个 CSS3 过渡在 Firefox 中不起作用. 没有 JavaScript.没有解决方法.只是解释为什么会失败会很棒. http://jsfiddle.net/VCdGt/3/ ..

发布时间：2021-12-19 14:22:41 firefox css css-transitions 前端开发

新元素上的 css 过渡

click ..

发布时间：2021-12-19 13:47:59 javascript css firefox css-transitions 前端开发

“0"上的单位Firefox 中的转换

为什么没有单位的以下转换在 Firefox 中不起作用?添加单位后，它就可以工作了.其他主流浏览器似乎对单位无动于衷. 据我所知，这是转换时间为“0"的唯一示例，没有单位，在 Firefox 中不起作用. 您可以看到它正在运行，并且使用单元，在 JSFiddle 中. 这里是没有单位的完全相同的代码，但已损坏，在 JSFiddle 上. 如您所见，Firefox 是唯一一个 ..

发布时间：2021-12-19 13:33:11 firefox css css-transitions transitions 前端开发

悬停时从中心填充元素

如何创建一个按钮，以便悬停时背景颜色从中心向元素的左侧和右侧填充元素. 示例: 我知道如何使用 CSS3 transitions 并且可以让它动画成所需的形状，但不能让它从中心向外过渡. 形状不会改变大小我只想使用 transition 填充它. 解决方案 另一种实现类似效果的方法是使用 linear-gradient 作为 background-image，将图像放置在 ..

发布时间：2021-12-18 20:52:23 css button css-transitions css-shapes 前端开发

Internet Explorer 是否支持 CSS 转换?

CSS 转换 是一种非常巧妙的方式，可以为 CSS 属性的变化设置动画.是否有任何版本的 Internet Explorer 支持它们? 解决方案 您链接到的页面具有 兼容性表. Chrome1.0 (-webkit 前缀)火狐4.0 (2.0)(-moz 前缀)16.0 (16.0)(无前缀)IE浏览器10.0(无前缀)歌剧10.5 (-o 前缀)12.0(无前缀)苹果浏览器3.2 ( ..

发布时间：2021-12-18 12:27:03 css internet-explorer css-transitions 前端开发

带有 calc() 的 CSS 转换在 IE10+ 中不起作用

我正在使用 CSS 转换从右到左为鼠标悬停的容器设置动画.这适用于除 Internet Explorer 之外的所有浏览器.原因是我在 CSS left 属性中使用(并且需要使用)calc(). 我在这里创建了一个现场演示:现场演示 CSS 看起来像这样: div {背景:红色；宽度:100px；高度:100px；位置:绝对；顶部:100px；左:90%；-webkit-transi ..

发布时间：2021-12-18 12:23:15 css internet-explorer css-transitions 前端开发

使用 CSS 在悬停时转换 SVG 路径的填充属性

我在我的页面上的 object 标记中包含一个 SVG 图像文件，如下所示: 有问题的图像是一张世界地图，当鼠标悬停在 group 上时，我想转换 fill 属性，在这种情况下，我对我的 SVG 进行了分组按大陆，所以南美洲看起来像这样: 我可以通过在我的 S ..

发布时间：2021-12-17 18:41:10 css svg hover css-transitions 前端开发

CSS3 过渡:是“过渡:全部"吗?比“转换:x"慢?

我有一个关于 css3 过渡属性的渲染速度的问题. 假设我有许多元素: div, span, a {transition: all}div {边距:2px}跨度{不透明度:.5}a:hover {background-position: left top}div:悬停{边距:-100px}跨度:悬停{不透明度:1}a:hover {background-position: -5px top ..

发布时间：2021-12-08 11:42:20 performance css css-transitions 前端开发

关闭 Twitter Bootstrap Navbar Transition 动画

就像http://twitter.github.com/bootstrap, 我现在工作的网站是响应式的. 我想删除过渡动画 当我点击折叠的导航栏菜单按钮时. 上图是我问的截图. 在右上角，有一个三行菜单按钮. 解决方案 Bootstrap 完成响应式导航栏的过渡动画的方式与处理任何折叠的方式相同，即使用 CSS3 过渡.要仅关闭导航栏的过渡(保留任何其他过渡 ..

发布时间：2021-12-07 22:27:39 css twitter-bootstrap css-transitions 前端开发