AngularJS 点击转换

Question

我是 angular 的新手，我发现这种方法可以使用 ng-click 和 ng-show 在用户单击 h3 时显示带有信息的 div。唯一的问题是它只是显示出来，我希望它是淡入还是向下滑动以显示。 :) 这行得通还是我应该换一种方式？？

<div class="col-sm-12">
    <div>
        <h3 class="no-margin-bottom toggleText" ng-click="showInfoHe = !showInfoHe"><i class="fa fa-plus-circle" aria-hidden="true"></i> Hälsoinformation</h3>
        <hr class="no-margin-top hr-line">
    </div>
</div>

<div class="col-xs-12 col-md-offset-3 col-md-9 margin-top" style="border: 1px solid purple" ng-show="showInfoHe">
    <div class="row cats-attributes">
        <p>info</p>
    </div>
</div>

Answer 1

你可以在没有 ngAnimate 的情况下做到这一点，通过使用 css 转换和 ngClass 你想在点击时做什么将一个变量设置为真然后有一个 class 有 opacity:1.

所以

<div class="parent-div" ng-click="yourVariable = true">
  <div class="child" ng-class={'opacity-class': yourVariable}>
  </div>
</div>

然后在 css

.parent-div {
  transition: opacity ease-in-out 1s;

}
.parent-div.child {
    opacity:0;
  }
.opacity-class {
   opacity:  1;
}

编辑：这是您提供的html结构的应用解决方案

<div class="col-sm-12">
    <div>
        <h3 class="no-margin-bottom toggleText" ng-click="showInfoHe = !showInfoHe"><i class="fa fa-plus-circle" aria-hidden="true"></i> Hälsoinformation</h3>
        <hr class="no-margin-top hr-line">
    </div>
</div>
<div class="show-info-container">
  <div class="col-xs-12 col-md-offset-3 col-md-9 margin-top show-info" style="border: 1px solid purple" ng-class="{'opacity-class':showInfoHe}">
      <div class="row cats-attributes">
          <p>info</p>
      </div>
  </div>
</div>

css

.show-info-container {
  transition: opacity ease-in-out 1s;

}
.show-info {
    opacity:0;
  }
.opacity-class {
   opacity:  1;
}

注意我添加了一个容器 div 并删除了 ng-show

AngularJS 点击转换

AngularJS Transition on click

transitions

angularjs