草庐IT

CSS过渡

全部标签

html - 侧面导航中的 Angular Material 滑动过渡?

当我点击设置时,它会导航到内部导航菜单,然后返回主菜单选项。为此,我正在尝试使用AngularMaterial在侧边导航中实现幻灯片过渡,但它没有在侧边导航中显示幻灯片过渡效果。AngularmaterialslidenavPlnkr::http://plnkr.co/edit/tAocrJglxnLs3mMPqAnb幻灯片转换:当我们点击设置时,它会导航到内部菜单,然后单击后退导航到主菜单。为此需要幻灯片过渡效果。例如:http://plnkr.co/edit/o37kGQByrXX9jdIxuIXZ任何人建议幻灯片过渡效果。 最佳答案

html - 将 html 表格行跨度转换为 CSS

我在这里查看了一些关于从html表到css的转换的帖子,但找不到我正在寻找的内容并希望得到一些帮助。我正在使用表格作为一些不同尺寸储物柜的图形表示。因此,一些表格单元格跨越多行。当有几个静态模型时一切都很好。现在我必须处理动态配置,表格很麻烦,所以我正在尝试将其转换为CSS。当单元格跨越多行并且不确定如何设置CSS时,我遇到了一些问题。在尝试动态生成代码之前,我需要了解它是如何静态完成的。这是一个简短的示例:R0C0R0C1R0C2R1C1R1C2R2C1R2C2R3C1R3C2CSS(尝试),可以获取第一行但不确定如何进行其余操作:R0C0R0C1R0C2还尝试使用css“table

html - 将 html 表格行跨度转换为 CSS

我在这里查看了一些关于从html表到css的转换的帖子,但找不到我正在寻找的内容并希望得到一些帮助。我正在使用表格作为一些不同尺寸储物柜的图形表示。因此,一些表格单元格跨越多行。当有几个静态模型时一切都很好。现在我必须处理动态配置,表格很麻烦,所以我正在尝试将其转换为CSS。当单元格跨越多行并且不确定如何设置CSS时,我遇到了一些问题。在尝试动态生成代码之前,我需要了解它是如何静态完成的。这是一个简短的示例:R0C0R0C1R0C2R1C1R1C2R2C1R2C2R3C1R3C2CSS(尝试),可以获取第一行但不确定如何进行其余操作:R0C0R0C1R0C2还尝试使用css“table

javascript - 如何将 css 类添加到 react 中的组件?

所以基本上我所做的是遍历一组数据并制作某种列表。我在这里想要实现的是点击一个特定的列表项,一个css类应该被附加。迭代制作列表varsports=allSports.sportList.map((sport)=>{return()})单个列表项{text}我无法弄清楚如何处理handleClick,以便在我单击特定列表时它会突出显示。 最佳答案 如果你想突出显示特定的列表项,最好在列表项本身上调用handleClick函数,你可以用这种方法更准确地添加CSS类,这是我实现单个列表组件的示例代码varSingleListItem=Re

javascript - 如何将 css 类添加到 react 中的组件?

所以基本上我所做的是遍历一组数据并制作某种列表。我在这里想要实现的是点击一个特定的列表项,一个css类应该被附加。迭代制作列表varsports=allSports.sportList.map((sport)=>{return()})单个列表项{text}我无法弄清楚如何处理handleClick,以便在我单击特定列表时它会突出显示。 最佳答案 如果你想突出显示特定的列表项,最好在列表项本身上调用handleClick函数,你可以用这种方法更准确地添加CSS类,这是我实现单个列表组件的示例代码varSingleListItem=Re

javascript - 如何在 HTML/使用 CSS 中制作 "non-droppable group"?

是否可以在HTML中/使用CSS创建一个“不可删除的组”?例如,如果我有一个像这样的简单元素:Name:Item给定足够的尺寸(宽度),它会被渲染成这样:但如果宽度变得太小,Item标签和TextBox将被“丢弃”在Name标签下方,如下所示:是否可以创建这样的行为,即当宽度较小时,将调整文本框大小,但标签将保留在文本框的左侧和右侧,而不是被“丢弃”?举例说明:Onlargescreen:Name:||ItemOnsmallscreen:Name:||Item如果这必须使用Javascript完成,我也同意使用Javascript的建议答案。 最佳答案

javascript - 如何在 HTML/使用 CSS 中制作 "non-droppable group"?

是否可以在HTML中/使用CSS创建一个“不可删除的组”?例如,如果我有一个像这样的简单元素:Name:Item给定足够的尺寸(宽度),它会被渲染成这样:但如果宽度变得太小,Item标签和TextBox将被“丢弃”在Name标签下方,如下所示:是否可以创建这样的行为,即当宽度较小时,将调整文本框大小,但标签将保留在文本框的左侧和右侧,而不是被“丢弃”?举例说明:Onlargescreen:Name:||ItemOnsmallscreen:Name:||Item如果这必须使用Javascript完成,我也同意使用Javascript的建议答案。 最佳答案

html - 什么会导致错误 '(CSS 3.0): ":-webkit-autofill"is not a valid pseudo-class. '

我有一个正在使用VisualStudio2015构建的MVC网络应用程序。我的一些表单对输入元素使用自动填充,但在使用Chrome时,由于Chrome用户代理样式表,自动填充字段会留下令人厌恶的淡黄色背景。广泛接受的解决方案是使用以下CSS来呈现没有黄色背景的输入:input:-webkit-autofill{-webkit-box-shadow:0001000pxwhiteinset!important;}这种方法在我以前的所有元素(使用VisualStudio2013构建)中都非常有效。但是,在我的CSS文件中,上面的代码显示为无效并出现以下错误:Validation(CSS3.0

html - 什么会导致错误 '(CSS 3.0): ":-webkit-autofill"is not a valid pseudo-class. '

我有一个正在使用VisualStudio2015构建的MVC网络应用程序。我的一些表单对输入元素使用自动填充,但在使用Chrome时,由于Chrome用户代理样式表,自动填充字段会留下令人厌恶的淡黄色背景。广泛接受的解决方案是使用以下CSS来呈现没有黄色背景的输入:input:-webkit-autofill{-webkit-box-shadow:0001000pxwhiteinset!important;}这种方法在我以前的所有元素(使用VisualStudio2013构建)中都非常有效。但是,在我的CSS文件中,上面的代码显示为无效并出现以下错误:Validation(CSS3.0

html - 为什么 CSS 转换在移动版 Chrome 中滞后?

在我研究CSS图像缩放功能的过程中,我遇到了移动版Chrome的性能问题。描述:如果我尝试通过将CSStransform属性直接添加到图像来缩放图像,一切正常。缩放过渡像60fps的黄油一样平滑(JSFiddle)。问题:但是,如果我将图像包装在一个div容器中并尝试转换该容器,转换就会非常缓慢(JSFiddle)。过渡开始时有很大的延迟,而且并不顺利。这似乎只是移动Chrome的一个问题,因为它不会在其他浏览器(如Android上的Firefox)中发生,只会在我的移动设备(Nexus5)和其他一些Android设备上发生。有人知道CSS或HTML结构有什么问题吗?