Angular：伪元素的动画,例如：before,：after

发布时间：2020-12-17 07:16:27 所属栏目：安全来源：网络整理

导读：我正在寻找动画伪元素的方法,例如：之前,之后使用Angular动画. 我试着用一个查询： trigger('myanimation',[ query('.myclass:after',style({ top: 10px })) ]) 但不幸的是,它没有用. 这是代码 – https://stackblitz.com/edit/angular-ofa3wa 我想通过点击

我正在寻找动画伪元素的方法,例如：之前,之后使用Angular动画.

我试着用一个查询：

trigger('myanimation',[
  query('.myclass:after',style({ top: 10px })) 
])

但不幸的是,它没有用.

这是代码 – https://stackblitz.com/edit/angular-ofa3wa
我想通过点击制作动画：鸟儿闭上眼睛.

enter image description here

解决方法

不幸的是,我不认为此功能目前存在,因为CSS伪元素实际上不是DOM的一部分.

我知道你问的是Angular Animations,但另一种方法是这样的：

app.component.html

<div class="globe" (click)="goSleep()">
    <div class="bird">
        <div class="body">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="beak"><div></div></div>
        <div class="feet"></div>
        <div class="wire"></div>
        </div>
    </div>
</div>

app.component.ts

goSleep() {
    let eyes = document.getElementsByClassName('eye');
    for (var i = 0; i < eyes.length; i++) {
        eyes[i].classList.add('eye-closed');
    }
}

app.component.scss

.eye-closed::after {
  top: 0px !important;
  transition-property: top;
  transition-duration: 2s;
  transition-timing-function: linear;
}

单击div时,它会调用goSleep()函数,该函数会向已具有类眼睛的元素添加一个名为eye-closed的新类.

最后,添加相应的css,它允许您控制CSS伪元素,以及应用所需样式的过渡时间.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!