我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS-only下拉菜单,但包含不同类型的内容.
目前,似乎CSS3过渡不适用于"display"属性,即你不能做任何类型的过渡display: none到display: block(或任意组合).
当有人将鼠标悬停在其中一个顶级菜单项上时,是否有人会想到上述示例中的第二层菜单可以"淡入"？
我知道你可以在visibility:属性上使用转换,但我想不出有效利用它的方法.
我也尝试过使用身高,但这只是失败了.
我也知道使用JavaScript实现这一点是微不足道的,但是我想挑战自己只使用CSS而且我认为我有点短.
所有和任何建议最受欢迎.
我的应用程序使用jQuery的slideDown和slideUp表现不佳.我希望在支持它的浏览器中使用CSS3等价物.
是否有可能,使用CSS3过渡,一个元素从改变display: none;到display: block;,而滑动的项目向上或向下？
我有一个网站,我决定用纯CSS片段替换基于jquery的切换框.当我使用固定高度值进行过渡(CSS的最后一行)时,它运行良好,但是使用该auto值,动画丢失,只有高度变化才有效!
有没有办法使用自动值？我想使用变量文本而不使用脚本.
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
background: linear-gradient(top, …你能用CSS3从height:0过渡到内容的可变高度吗？
我一直想知道为什么我应该使用Angular动画而不是CSS动画.我发现在使用它们之前可能会考虑的几个方面:
在第一步中,我发现这个问题只涉及性能方面.接受的答案对我来说并不令人满意,因为它声明应尽可能使用CSS动画,以便在单独的线程中运行动画的优化可以应用.这似乎不正确,因为Angular文档说明了这一点
角度动画构建于标准Web动画API之上,并在支持它的浏览器上本机运行.
(强调我的)
当我们查看Web Animations API Draft时,我们发现相同的优化可以应用于Web动画,而不是在工作表中指定的CSS.
虽然可以使用ECMAScript使用requestAnimationFrame [HTML]执行动画,但这些动画在声明动画方面的表现方式与它们在CSS级联中的表示方式以及可能的性能优化(例如在单独的线程上执行动画)有所不同.使用Web Animations编程接口,可以从脚本创建具有与声明性动画相同的行为和性能特征的动画.
(再次强调我的)
除了像IE这样的浏览器不支持Web动画,有没有理由使用CSS声明而不是Angular动画,反之亦然？我认为它们是可交换的性能.
这可能看起来像Angular动画的一个参数,因为你可以暂停动画或使用它等JS变量,但使用eg时也是如此.CSS animation-play-state: pause或使用JS中指定的CSS变量,请参阅文档.
现在我可以看到在JS代码中设置CSS变量可能不方便,但使用Angular动画时也是如此.这些通常在@Component animations字段中声明并且没有,除了通过动画状态数据绑定属性,访问实例字段(如果你AnimationBuilder当然不通过创建动画,btw也不是很方便或漂亮) .
另一点是,使用Web Animations API可以检查,调试或测试动画,但我不知道Angular动画是如何实现的.如果是的话,请你告诉我怎么样？如果不是这样的话,为了控制,我真的没有看到使用Angular动画而不是CSS的优势.
我在这里阅读了一个段落,说明将动画与"普通"样式分开实际上是行为和表现的分离.真的在样式表中声明动画混合了这些责任吗？我总是以另一种方式看到它,特别是在@Component动画中查看CSS规则让我感觉在一个太多的地方都有CSS声明.
我很想知道使用Angular动画的实际优势.先谢谢你们!
如何添加展开/折叠转换？
假设你有类似的东西:
<div class="parent">
<input class="childInput" type="text" />
<div class="sibling"></div>
</div>
我想在孩子获得焦点时改变父母/兄弟姐妹的外表.做这样的事情有什么CSS技巧吗？
编辑:
我的问题的原因如下:
我正在创建一个需要可编辑文本字段的Angular应用程序.它应该看起来像一个标签,直到它被点击,此时它应该看起来像一个普通的文本输入.我基于以下方式设置文本字段:focus以实现此效果,但文本被文本输入的边界切断.我还使用ng-show,ng-hide,ng-blur,ng-keypress和ng-click在标签和文本输入之间切换,基于模糊,按键和点击.除了一件事之外,这个工作正常:在标签的ng-click ="setEdit(this,$ event)"之后,将ng-show和ng-hide使用的编辑布尔值更改为true,它使用jQuery调用.select()文字输入.但是,直到完成ng-click之后,所有内容都是$ digest'd,因此文本输入再次失去焦点.由于文本输入实际上从未实际获得焦点,因此使用ng-blur恢复显示标签是错误的:用户必须单击文本输入,然后再次单击它以恢复显示标签.
编辑:
我只是想知道以下是否可行,让我们说我们有一个dom元素,我们想要将这个元素包装在div中.所以在元素和它的父元素之间插入一个div.然后div成为元素的新父级.
但是为了使问题复杂化,我们已经在其他地方完成了以下事情:
var testElement = document.getElementByID('testID')
其中testID是要在div中包装的元素的子元素.所以在我们完成插入后,testElement仍然有效吗？
顺便说一句:我没有使用jquery.
有任何想法吗？
谢谢,
AJ
我正在尝试使用AngularJS实现slideDown/slideUp动画.我不能使用CSS3过渡(不幸),因为height被设置为auto(我不希望使用的max-height解决方法),所以我试图用jQuery的slideToggle方法.
鉴于以下标记:
<ul>
<li ng-repeat="entry in data">
<span>{{entry.title}}</span>
<a ng-click="clicked($event)" href>more?</a>
<p>{{entry.description}}</p>
</li>
</ul>
我在我的控制器中实现了以下方法:
$scope.clicked = function($event) {
var a = jQuery($event.target);
var p = a.next();
p.slideToggle();
};
即使它似乎按预期工作,我也明白修改DOM应该只在指令内完成.
在阅读了AngularJS的文档(我发现有点轻微的恕我直言)后,指令对我来说仍然有点模糊,所以有人能告诉我以下指令是否尊重AngularJS的最佳实践吗？
.directive('testDirective', [
function() {
return {
restrict: 'A',
scope: {
entry: '=testDirective'
},
template: '<span>{{entry.title}}</span> ' +
'<a ng-click="clicked($event)" href>more?</a>' +
'<p>{{entry.description}}</p>',
link: function(scope, element) {
var p = jQuery(element.find('p'));
scope.clicked = function($event) { …请看下面的jsFiddle
您可以单击各种按钮,这些按钮显示不同长度的内容,这会导致框增长/缩小.
我希望高度变化是动画的,所以它不是那么跳跃,我尝试通过添加:
-webkit-transition: all 1s linear;
但这在这个用例中没有任何影响.对于不需要JavaScript的解决方案的任何想法？
谢谢