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

我试着用一个查询：

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

但不幸的是,它没有用.

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

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

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

app.component.html

<div(click)="goSleep()">
    <div>
        <div>
        <div></div>
        <div></div>
        <div><div></div></div>
        <div></div>
        <div></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伪元素,以及应用所需样式的过渡时间.

使用-webkit-transition似乎不能使伪元素生成动画。下面的小提琴显示了我的意思是什么时候运行在Chrome / Safari，我想这是不是现在支持？

http://jsfiddle.net/4rnsx/130/

已于2013年1月3日在Google Chrome中修正。

现在(我确实更新这个列表)它支持：

> FireFox 4.0及以上
> Chrome 26及更高版本
> IE 10及以上

正在等待Safari和Android版Chrome浏览器来抓取这些更新。

你可以test it yourself in your browser，或

见browser support table。

在其他浏览器上,除了Firefox之外,网页看起来很好.即使是Internet Explorer！伪元素在文档中浮动,甚至在第一个元素之后也不会显示.有这种行为的解决方案吗？

CSS

span[property="dc:date dc:created"]::before{
    position: absolute;
    top: 60px;
    content: '';
    display: block;
    background-color: #005691;
    width: 60px;
    height: 20px;
}

span[property="dc:date dc:created"]::after{
    position: absolute;
    top: 60px;
    right: 0;
    width: 0px;
    height: 0px;
    border-top: 20px solid #01416F;
    border-right: 20px solid rgba(0,0);
    content: '';
}

http://jsfiddle.net/LRnCM/1/

您需要相对于父元素定位绝对定位的伪元素.此外,添加了内联块以包含父元素的宽度.

.submitted {
    position:relative;
    display:inline-block;
}

UPDATED EXAMPLE