angularjs – Angular / CSS – 动态添加新元素时动画内容的移动

2023年7月16日 210次阅读

角度动画菜鸟在这里.

我可以使用ngAnimate成功地将内容动画到页面上.但是,当我的新内容滑入时,其下方的所有内容都会跳转到新位置.同样,当删除新内容时,以下内容会重新启动.是否有角度方式为以下内容的新位置设置动画？

<button class="button" ng-if="typingResponse">
    Submit!
</button>
<div class="response-section">
  <label class="item item-input item-stacked-label">
    <span class="input-label">Response</span>
    <textarea></textarea>
  </label>
</div>


.button.ng-enter {
  -webkit-animate: slideInLeft 1s;
  animation: slideInLeft 1s;
}
.button.ng-leave {
  -webkit-animate: slideOutLeft 1s;
  animation: slideOutLeft 1s;
}

《angularjs – Angular / CSS – 动态添加新元素时动画内容的移动》

最佳答案 @klauskpm让我大部分都在那里,
this blog post是失踪的一块.

解：

>将按钮放在div中
>将div的初始最大高度设置为0px
>在div的max-height属性上指定转换
>当要显示按钮时,增加div的max-height属性

更新的代码：

<div class="button-container" ng-class="{'has-button': typingResponse}">
  <button class="button" ng-if="typingResponse">
    Submit
  </button>
</div>
<div class="response-section">
  <label class="item item-input item-stacked-label">
    <span class="input-label">Response</span>
    <textarea></textarea>
  </label>
</div>

.button.ng-enter {
  -webkit-animate: slideInLeft $slide-dur;
  animation: slideInLeft $slide-dur;
}
.button.ng-leave {
  -webkit-animate: slideOutLeft $slide-dur;
  animation: slideOutLeft $slide-dur;
}


.button-container {
  max-height: 0px;
  transition: max-height $slide-dur linear;
  -webkit-transition: max-height $slide-dur linear;
}

.button-container.has-button {
  max-height: 100px;
}
点赞