Tag: css3
如何使用CSS 3过渡获得与jQuery的slideToggle相同的效果？
我想要jQuery slideToggle效果，但想要使用CSS3过渡以便在iOS设备上调用GPU，以便过渡更顺畅。
根据内容自动调整文本区域大小
在我的一个页面上，我有一个文本区html标签供用户写入一个字母。我希望文本区域下面的内容向下移动，换句话说，我希望文本区域垂直调整，每行添加一行到文本区域并使下面的内容简单地相对于文本区域的底部定位。 我希望javascript / jquery有一种方法来检测单词的换行时间，或者添加新行并基于它来调整文本区域容器的大小。 我的目标是使文本区域下方的内容与文本底部保持相同的距离，无论用户写多少。 文本区域在文本溢出时创建滚动条。
如何在JavaScript中将px转换为vw？
我想在JavaScript中将px转换为vw ，我该怎么办？ 我一直在寻找它，但我没有找到任何东西。 所以， 1px→？ VW 谢谢。
没有jQuery Mobile Library的jQuery Mobile CSS3页面转换
我有一个使用HTML / JS（jQuery）/ CSS创建的移动应用程序，我希望包含模仿jQuery Mobile中的页面转换（特定于翻转过渡），而不需要包含整个jQuery Mobile Framework。 这些动画似乎是与jQuery触发器绑定的CSS3过渡但我不知道从哪里开始。 有没有人有任何想法？ 任何帮助将不胜感激！
使用jQuery的CSS3转换事件监听器
我正在对article元素实现CSS3过渡效果，但事件监听器transitionend仅适用于纯JavaScript，而不适用于jQuery。 见下面的例子： // this works this.parentNode.addEventListener( ‘transitionend’, function() {alert(“1”); }, true); // this does not work $(this).parent().addEventListener( ‘transitionend’, function() {alert(“1”); }, true); 有人可以解释一下我做错了什么吗？
动画模糊滤镜
是否可以使用jQuery动画CSS3模糊filter？ 这作为应用CSS规则的静态方式： item.css({‘filter’: ‘blur(‘+blur+’)’,’-webkit-filter’: ‘blur(‘+blur+’)’,’-moz-filter’: ‘blur(‘+blur+’)’,’-o-filter’: ‘blur(‘+blur+’)’,’-ms-filter’: ‘blur(‘+blur+’)’}); 但是当我用animate方法替换css方法时，没有任何反应。 item.animate({‘filter’: ‘blur(‘+blur+’)’,’-webkit-filter’: ‘blur(‘+blur+’)’,’-moz-filter’: ‘blur(‘+blur+’)’,’-o-filter’: ‘blur(‘+blur+’)’,’-ms-filter’: ‘blur(‘+blur+’)’},500); 有没有我不知道的伎俩？ 如何设置项目的模糊度？
Javascript设置CSS：样式之后
你能用Javascript设置：使用CSS的样式吗？ 所以我们说： $(“#foo li:after”).css(“left”,”100px”);
使用flexbox的谷歌浏览器视口锚定扩展方向
Google Chrome中存在一个问题，即当元素放置在Flexbox容器内时，元素在相对于视口的不同方向上展开/折叠，其中相邻的 flex项目具有space-between center对齐内容。 这在Firefox，IE11，Edge或Safari中不是问题，因为元素总是向下扩展。 我很好奇： Chrome的行为是否符合某些规范？ 如果是这样，哪一个？ 如果没有，那么为什么在Chrome中完成？ （恕我直言，点击触发器随机消失，这是一个可怕的用户体验。） 某些人可以修改或禁用Chrome的行为吗？ 例如。 通过CSS或元标记？ 更新1：如果可能的话，我已经向铬虫追踪者提交了问题＃739860，寻求Chromium开发者的见解/解释。 以下是插入的两个示例。 可以在此笔中找到描述该问题的完整测试套件： https ：//codepen.io/jameswilson/full/xrpRPg/我已选择在此示例中使用slideToggle，以便展开/折叠动画是动画的并且可见眼。 详细信息标记也会出现相同的行为，但目前还没有跨浏览器支持，并且展开/折叠过于繁琐。 例1：Chrome在合理的Flexbox之间的空间展开/折叠行为 $(‘button’).click(function() { $(this).next().slideToggle(); }) body { margin: 30px; font-family: sans-serif; } aside, aside div, summary, main, button, details p, button + p { background: rgba(0,0,0,.09); border: none; padding: 20px; margin: 0; } .flexcontainer { display: […]
CSS3：转换属性在chrome中无法正常工作
我正在努力实现以下的东西..它在Firefox中工作得很好，但同样的CSS 在chrome中工作有点像下面所示 我认为-webkit-transform-origin: 50% 100%; 在chrome或其工作中不起作用但不如预期的那样 演示Jsfiddle #flyDiv { width:720px; height:420px; transform-origin: 50% 100%; perspective: 300; transform: perspective(300px) rotateX(15deg); -webkit-transform: perspective(300px) rotateX(15deg); }
将变换值添加到元素上已有的当前变换中？
假设我有一个div ，它具有动态添加的translateX和translateY值。 我想将rotateY(20deg)添加到当前变换中，但是通过element.style.webkitTransform = “rotateX(20deg)”应用它会丢失其他值。 有没有办法添加rotateY而不会丢失translateX和translateY转换？
