Question

显示问题的

此plnkr显示一个带有登录栏的屏幕，点击它会淡化div一些内容。点击＆＃39; Down＆＃39;它会把它过渡下来。

问题是我的<h2>标记也会更改背景颜色。当您点击“向下”时，这会导致h2立即闪烁为白色。

我的代码：

HTML

<div class="login-container">
    <div [class]="sliderToggled ? 'slider opened' : 'slider closed'">
      <h2 *ngIf="!sliderToggled" class="login-title" (click)="toggleSlider()">Login</h2>
      <h2 *ngIf="sliderToggled" class="login-title active" (click)="toggleSlider()">Down</h2>

      <button class="button" (click)="login()" ion-button block>Log in</button>
    </div>
  </div>

ts（仅适用于切换样式，因此不重要，但包括在内）

export class AppComponent {

  sliderToggled:boolean = false;
  constructor(){
    console.log('Ok');
    this.sliderToggled = false;
  }

  toggleSlider() {
    this.sliderToggled = this.sliderToggled ? false : true;
  }
}

css（看看我尝试了@ h2{}）

body{
  background-color: #a13b4a;
}
/** THIS DOESN't TRANSITION */
h2{
    -webkit-transition: background .5s linear;
    -moz-transition: background .5s linear;
    -ms-transition: background .5s linear;
    transition: background .5s linear;
}

.login-title {
    height: 20%;
    background-color: white;
    width: 100%;
    color: #a13b4a;
    text-align: center;
}
.login-title.active{
    height: 20%;
    width: 100%;
    background-color: #a13b4a;
    color: white;
}

/** UNTILL HERE */
.login-container {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 60%; 
    width: 100%;
}

.slider {
    overflow-y: scroll;
    /* complete liquid height based on the parent's height!! */
    height:100%;

    /* only transition on transform properties which are hardware accelerated = way better performances */
      -webkit-transition:-webkit-transform .5s ease;
       -moz-transition:   -moz-transform .5s ease;
        -ms-transition:    -ms-transform .5s ease;
         -o-transition:     -o-transform .5s ease;
            transition:        transform .5s ease;
}

.slider.opened { 
    background-color: #a13b4a;
    /* visible */
    -webkit-transform: translate(0, 0%);
       -moz-transform: translate(0, 0%);
        -ms-transform: translate(0, 0%);
         -o-transform: translate(0, 0%);
            transform: translate(0, 0%);
}
.slider.closed { 

    /* completely offscreen */
    -webkit-transform: translate(0, 80%);
       -moz-transform: translate(0, 80%);
        -ms-transform: translate(0, 80%);
         -o-transform: translate(0, 80%);
            transform: translate(0, 80%);
}

我想要的是，在滑块的0.5s转换期间，h2标签要么淡出背景，甚至更好的是等待滑块的转换结束然后淡化为白色。

Answer 1

看起来你正在采用的Angular方法是删除h2并重新插入它，或类似的东西，而不是简单地添加/删除活动类。这样可以防止转变发生。

尝试更改处理方式，只需在h2元素中添加/删除活动类。我不知道角度是否足以帮助达到这一目的。

如果您在plnkr上打开Chrome中的开发工具并选择h2元素，请查看点击它时会发生什么。模板更改为：

      <!--template bindings={
  "ng-reflect-ng-if": "true"
}--><h2 class="login-title">Login</h2>
      <!--template bindings={
  "ng-reflect-ng-if": null
}-->

要：

      <!--template bindings={
  "ng-reflect-ng-if": null
}-->
      <!--template bindings={
  "ng-reflect-ng-if": "true"
}--><h2 class="login-title active">Down</h2>

减轻移动<h2>

1 个答案: