折叠项目中宽度的CSS动画

文章/答案/技术大牛

发布

1回答

css、css-transitions

目前我有一个简单的div，有一个按钮，一个div代表一个框，具有折叠行为。单击该链接将隐藏/显示该框。只有长方体有固定的宽度，我试图正确地为父对象的收缩设置动画，但到目前为止，我还没有取得太多成功。下面是示例的一个小插曲： http://jsfiddle.net/k7ndv4uf/3/ const btn = document.querySelector('#btn'); const b

浏览 20提问于2021-06-24得票数 0

2回答

将高度设置为零后Css转换失败

javascript、html、css、css-transitions

我在文章元素中展开和折叠动画到div上。基于这个小提琴代码：当div框被展开时("div.expandable")，我不希望将高度硬编码(锁定)留在一个特定的值，因此我通过删除高度值：el.css("height", ""); (动画完成后在为折叠/关闭动画再次将高度设置为"0“之前，我将恢复高度(返回到136 it )。在重新设置动画之后，没有将动画<

浏览 6提问于2014-01-28得票数 4

回答已采纳

2回答

jQuery将图像附加到div动画

javascript、jquery、html、animation、gallery

在该示例中，当用户单击图库项时，将使用id="showimage"将图像追加到div。我无法解决的是如何传递单击图像的参数，并显示该图像，而不是绝对图像。它的职能如下：如果在s

浏览 3提问于2012-04-21得票数 0

回答已采纳

1回答

纯CSS中Flex中选项卡项的Tab滑块动画

javascript、css、flexbox

我一直在尝试创建自己的带有滑动动画的React Tabs组件，类似于或。如果它包含js，我可以这样做，但是这里的问题是我不能在js或内联css中使用css。因此，在Nextjs项目中它是纯粹的scss / css。另一个问题是标签是响应性的(没有固定宽度)，所以容器是flex的，它可以包含多个标签项( flexItems )(可能包含不同的</

浏览 4提问于2021-10-06得票数 0

1回答

jquery砌体动画项目

jquery、jquery-plugins

这是我的工作：所有操作正常，除非单击“第一项”，该项目折叠所有项目。有人能帮帮我吗？任何帮助都是非常感谢的！

浏览 2提问于2012-05-21得票数 2

14回答

我在Rails 3.1.2项目中使用Twitter 2.0.1，该项目是用引导-sass实现的。我正在同时加载bootstrap.css和bootstrap-responsive.css文件，以及bootstrap-collapse.js Javascript。我有一个类似于的导航条的流体布局。这遵循导航栏“响应变化”指令。它工作得很好:如果页面比大约940 to窄，那么导航条就会折叠并显示一个“按钮”，我可以点击这个按钮来展开。不过，我的</

浏览 16提问于2012-02-23得票数 94

回答已采纳

1回答

如何用CSS变换伪造宽度动画？

html、css、css-transitions

我试图动画一个边菜单的宽度，这样菜单就会“折叠”，但是我遇到了一些限制：我希望菜单在折叠时仍然显示最左边的20 of，这样您就可以看到菜单的“负担能力”。我想避免动画的width菜单，因为我想避免内容再流。(我设法绕过了这一点，在菜单中有一个全宽度的容器，这样里面的内容就会溢出，而不是重新返回到菜单的大小)。我想使用CSS转换，这样transition就可以

浏览 2提问于2015-10-28得票数 3

回答已采纳

1回答

角度5和向右滑动动画

angular

我想在div上做动画，它将元素的宽度从100%更改为20%，从左到右折叠，div的右边界应该留在相同的位置。我创建了从右到左折叠div的动画，将宽度从100%更改为20%：[style({ })),

浏览 4提问于2018-08-07得票数 0

2回答

元素css遵循jquery声明，而不是样式表

javascript、jquery、html、css、dom

我最初在我的.css样式表中有以下代码： #main_panel { #main_panel { }然后，在一些用户交互之后，此jQuery命令更改此CSS-value$("#main_panel").animate({width: "500px&quo

浏览 0提问于2014-01-23得票数 3

1回答

1280 at屏幕宽度的可折叠自举导航

jquery、html、css、twitter-bootstrap

目前，我正在用bootstrapcdn.com在我的项目中包含引导程序，并且有一个单独的文件来处理我所有的定制CSS。由于某些原因，我在选择导航栏何时会崩溃时遇到了问题。它目前的折叠宽度为766 at，但需要在1280 at宽(标准窗口大小)时折叠。知道我应该把什么放在我的自定义css文件中吗？

浏览 2提问于2013-12-05得票数 1

回答已采纳

2回答

jQuery动画与文本对齐中心

jquery、css

我一直在为一个没有固定高度和宽度的盒子做动画。到目前为止，它还在起作用，有个小问题。De代码在下面，下面是要演示的。(我已将动画设置为1500，以使问题更加明显)。我想要的--如果可能的话--是在中间的按钮‘设置’

浏览 2提问于2014-09-01得票数 0

回答已采纳

1回答

使用不带Javascript的CSS将宽度从固定大小转换为“自动”

css、width、css-transitions

我在制作脚本时遇到了一些问题--没有CSS--只有一个元素的动画转换，该元素最初被设置为固定的宽度，应该根据其中的内容在鼠标上扩展到自动宽度。当鼠标熄灭时，它应该会折叠回固定的宽度。假设我有菜单： <li>Item</li></men

浏览 2提问于2013-07-09得票数 4

1回答

什么是在悬停时将标识转换为汉堡包图标的好格式/方法？

css、reactjs、animation

在我的反应项目中，我有一个折叠的边栏菜单，顶部有一个徽标。我想添加一些功能，在折叠的侧边栏上盘旋，将徽标转换为基本的汉堡包菜单，然后在鼠标离开侧边栏时返回到徽标。我可以访问一个可以创建动画资产(例如GIF)的设计师，但我不知道如何用GIF实现这样的东西。在我有限的网络项目动画经验中，我觉得能够以某种方式使用CSS动画进行转换是非常理想的<

浏览 4提问于2022-10-28得票数 0

回答已采纳

1回答

选择元素:没有javascript的短名称和长名称？

javascript、forms、menu、html-select

是否有非javascript方法允许元素在折叠时显示简短的显示文本，在展开时显示较长的文本？我遇到了"label“属性，但它仅在IE7+中受到支持。示例：哲学101宗教研究202Mind及其潜在的404菲尔101RELI 202MEDI 303MIND 404<code>F 219</code>我试图用几个选择菜单来清理表单的</

浏览 0提问于2009-10-18得票数 0

1回答

语义UI菜单-单击后消失

javascript、jquery、html、css、semantic-ui

我试图使2个状态-一个广泛的与每个项目的类型，和一个紧凑的图像为每个项目。目前有几个问题我完全被难住了！2)如何使页面不变暗？3)页面的宽度可以折叠，而不是向右推吗？非常感谢!我的网站在这里： <html> <meta charset="utf-8"> &

浏览 4提问于2017-03-31得票数 0

1回答

设置CSS样式，给人以本机应用程序的感觉

jquery、html、css、mobile、jsfiddle

我希望我的无序列表，这是与jquery的折叠功能动画占据整个屏幕的宽度和高度，给人一种原生移动应用程序的感觉。列表中的一个元素将始终处于下拉状态。这是jsfiddle body, celebs, and html styling to remove all margins and

浏览 1提问于2013-03-28得票数 0

回答已采纳

1回答

如何放置两个水平相邻的div，其中一个是可折叠的？

html、css

在我的表格单元格中，它以100%的宽度显示，我试图水平地相邻显示两个div。第一个元素应该是可折叠的，一旦折叠，元素2应该与空白空间重叠。如果第一个元素可见，它应该占用25%的空间，而第二个元素占75%。上述情况显示了第一项和第二项。底部的那个正好是宽度为100%的第二个项目。我如何在CSS中做到这一点？(其中f.

浏览 0提问于2018-05-07得票数 0

3回答

基础5-均匀间隔的顶栏导航项目

css、responsive-design、sass、zurb-foundation

Zurb基金会的top-bar非常有用。它作为站点/应用程序的主导航功能非常好，并在较小的设备上折叠成移动友好的格式。如果top-bar有6个nav项(宽度可变长度标题)，并且我们对.rows使用默认宽度1000 of (有15 of槽)，则6个

浏览 3提问于2014-02-26得票数 5

1回答

使用jQuery的动画()使元素折叠

javascript、html、jquery-animate

我正在试验一种动画，它会使内联html元素自行折叠(所有元素都移动到中心)。我正在接近它的方式是非常笨重，不工作，因为宽度的元素变化。以下是我的尝试：<p id="one">1</p> × <p id="two">2</p>p { position:relative

浏览 2提问于2013-08-09得票数 0

回答已采纳

1回答

如何排除坏的jQuery动画

javascript、jquery、html、css

最近，我正在为一个需要一些元素动画的网站模板编写代码。当然，我决定启动我的jQuery并使用它的一些标准库来动画我的div。在本例中，我希望使用slideUp()函数。当我对其进行编码并进行了一次试验时，我注意到动画非常不稳定，所以我决定在这里和网上寻找线索，结果显示得相当短。的问题提供了一些提示，但我并没有真正使用它。因此，我想知道:过去，你是如何处理每一种情况的？我将张贴一个答案与我认为是有帮助的解决方案。

浏览 1提问于2014-12-16得票数 0

回答已采纳

点击加载更多