我有以下html:
<div>
<div data-ng-click="showContent()" data-ng-show="!visible" class="fly-in-group">{{heading}}</div>
<div data-ng-show="visible" class="fly-in-group">
<div data-ng-click="showHeadings()">Terug naar jaaroverzicht</div>
<div data-ng-transclude></div>
</div>
</div>
和css:
.fly-in-group{
-webkit-transition:all 2s linear 0s;
transition:all 2s linear 0s;
position: relative;
left: 0;
line-height:15px;
opacity:1;
padding:10px;
}
.fly-in-group.ng-hide-add,
.fly-in-group.ng-hide-remove{
display: block !important;
}
.fly-in-group.ng-hide-add{
position: relative;
right: -9999px;
}
.fly-in-group.ng-hide-remove{
position: relative;
left: -9999px;
}
这是Fiddle
我试图完成的是,当点击“某个标题”时,此div会向左滑出,而另一个div(带有项目)会从右侧滑入。
我想使用Angular + CSS3完成此操作,但我无法理解。有人可以帮助我并解释它是如何工作的吗?
答案 0 :(得分:0)
CSS3过渡取决于特定属性的变化。
使用ngHide隐藏元素时,会将“ng-hide”类添加到元素中。因此,如果我们想让事物滑入和滑出,我们需要覆盖.ng-hide,以便它改变我们感兴趣的属性。关键点是我们还必须覆盖.ng-hide的默认{{1}否则会破坏过渡。
在这种情况下,不需要调整中间类,.ng-hide-add和.ng-hide-remove。
要使用最低要求的更改来解决问题,请将CSS更改为此(fiddle here):
display: none
我的一个警告是,我将.fly-in-group的位置改为绝对。我这样做是为了防止过渡期间出现恼人的闪烁。
答案 1 :(得分:0)
我建议使用css3转换而不是使用&#34; left&#34;。我还更新了角度版本。
这是小提琴:
http://jsfiddle.net/fernandopasik/GcUjL/
.fly-in-group {
-webkit-transition:all 0.2s linear 0s;
-moz-transition:all 0.2s linear 0s;
-o-transition:all 0.2s linear 0s;
-ms-transition:all 0.2s linear 0s;
transition:all 0.2s linear 0s;
position: absolute;
left: 0;
cursor: pointer;
line-height:15px;
opacity:1;
padding:10px;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.fly-in-group.ng-hide {
display: block !important;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}