相关疑难解决方法(0)

我正在尝试<ul>使用CSS过渡进行滑动.

将<ul>在开始关闭height: 0;.悬停时,高度设置为height:auto;.然而,这导致它只是出现而不是过渡,

如果我从那里height: 40px;开始height: auto;,那么它会向上滑动height: 0;,然后突然跳到正确的高度.

如果不使用JavaScript,我怎么能这样做呢？

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
} …

我正在尝试使用angular2的动画,我想知道它们对标准css动画/过渡有什么特别的优势.

例如,典型的材料设计卡和悬停效果与框阴影.大多数css框架使用:hover和css-transitions.使用角度2动画有特别的优势吗？

我在某处读到某些css动画属性并没有调用GPU那么多,因此有一些延迟和滞后.angular2动画怎么样？

我正在尝试制作一个简单的动画,如下面的简单jQuery

animate({'left' : left_indent})

我正在使用Angular2动画,但问题是如何将我的Component Class外的left_indent参数传递给动画触发器？

animations: [
    trigger('flyInOut', [

        state('for', style({
            left: this.left_indent,
        })),

        transition('* => for', [
            animate(2000, keyframes([
                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
            ]))
        ]),
    ])
]

我有两个路由组件及其容器,我已设置动画触发器@slide,其中我查询每个和相应的动画.

<div [@slide]="o.activatedRouteData.name">
  <router-outlet #o="outlet"></router-outlet>
<div>

RouterModule.forRoot([
  { path: '',      component: HomeComponent,  data: { name: 'home' } },
  { path: 'login', component: LoginComponent, data: { name: 'login' } } ])

trigger('slide', [
  transition('login => home', [
    query('home', style({ left: '-120%', right: '120%' })),
    query('login', style({ left: '0', right: '0' })),

    query('home', animate(duration, style({ left: '0', right: '0' }))),
    query('login', animate(duration, style({ left: '120%', right: '-120%' })))
])

这是有效的,除了第二个动画在开始之前等待第一个动画完成,而我正在寻找的是让它们并行发射的方法.思考？