我在一个元素上使用类绑定,然后它的scaleY()应该从1变为0。当我尝试使用:hover
选择器进行转换时,它工作得很好,但当我实际使用类绑定时,它只是弹出而没有期望的转换。
我在网上看了看,大多数已经回答的问题都是关于CSS不正确的,比如这个例子(angular ng-class appending classes does not trigger css3 transition)。
代码如下:filledPortion
是一个包含10个布尔值的数组,如果它们被设置为true,那么它会添加filled
类,它确实这样做了!我要重复一遍,但是Angular确实添加/删除了类,因为它应该这样做,我唯一的问题是它跳过了我的转换(当我尝试使用:hover
选择器时,它是有效的)
component.html
<div class="bar" [class.end]="typeEnd">
<span *ngFor="let portion of filledPortion; let i = index" class="portion" [class.filled]="portion"></span>
</div>
字符串
component.scss
.bar {
.portion {
position: relative;
width: 2rem;
height: 1.5rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: bottom;
transform: scaleY(0);
background-color: var(--red);
transition: transform .250s cubic-bezier(0.4, 0.0, 0.2, 1);
z-index: 1;
}
&.filled::before {
transform: scaleY(1);
}
}
}
.end {
.portion {
&::before , &::after {
background-color: #fff;
}
}
}
型
1条答案
按热度按时间nhaq1z211#
我知道现在回答这个问题已经太晚了,但也许这对以后看到这个问题的人有帮助。
简答原因是您在
ngFor
内部使用了transition。**解决方案:**使用Angular Animation
详细回答:
当你更清楚地了解
ngFor
在Angular中的工作方式时,就可以理解原因了。从技术上讲,当循环的项目状态发生变化时(在您的例子中,span
与portion
类),Angular会删除以前的span,用新的条件重新创建span,并将其添加到dom中。(更多技术细节,请查看How is Angular's ngFor implemented?)。因此,浏览器会用新的样式呈现项目,这将是人类视图的瞬间变化。这种行为可能会被错误地计算为
transition
不工作,但是,如果类被添加到同一个dom中,转换可能会工作。但不幸的是,这里的情况并非如此。你可以通过浏览器的开发者工具简单地在DOM中手动添加/删除类。你会看到你所期待的过渡工作。结论:
所以问题不在于Angular,它的类绑定或转换。过渡设置是正确的,但由于更改不影响相同的dom,因此浏览器引擎无法实现过渡动画。因此,Angular引入了
BrowserAnimationsModule
,可以完全满足您的需求。