angularjs链式淡入/淡出过渡

Posted

技术标签:

【中文标题】angularjs链式淡入/淡出过渡【英文标题】:angularjs chained fade-in / fade-out transition 【发布时间】:2013-11-03 22:50:16 【问题描述】:

我查看了本页底部的官方显示/隐藏转换示例...http://docs.angularjs.org/api/ng.directive:ngShow

我尝试对其进行修改以获得从一个 div 到另一个 div 的无缝淡入淡出过渡(过渡:不透明度 0.5s 缓进出),其中两个 div 在页面上占据完全相同的位置,因此一个 div在另一个 div 开始淡入之前完全淡出。

在 jquery 中,它会很简单:

$("#divA").fadeOut(function()  $("divB").fadeIn(); );

对于使用“检查”单个模型来触发转换的链接示例,是否有人对使用 Angular 实现此目的的最佳方法有任何建议?

【问题讨论】:

我想我需要更多信息...什么会触发褪色效果?你能举一个使用更多示例代码的例子吗? 我可以,但我想我可以参考链接中的示例来描述它。在该示例中,具有 class="check-element animate-show" 属性的两个动画 div 会同时进行动画处理(即它们在制作动画时都是可见的)。我在 jquery 中使用的一个非常常见的场景是淡出/隐藏第一个 div,一旦隐藏,然后在页面上完全相同的位置淡入/显示第二个 div。换句话说,干净地淡出一些内容,然后淡入替换内容 - 在任何时间点都只有一个内容 div 可见。 你用过这些答案吗?如果是这样,您应该接受选择的答案。 【参考方案1】:

我使用ngShow 中的示例基于angular1.2.0-rc.3 制作了以下jsfiddle。

html代码:

<div ng-app="App">
  Click me: <input type="checkbox" ng-model="checked"><br/>
     <div class="check-element animate-show" ng-show="checked">
      <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
    </div>
    <div class="check-element animate-show" ng-hide="checked">
      <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
    </div>
</div>

CSS 样式

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove 
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;


.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove 
  line-height:0;
  opacity:0;
  padding:0 10px;


.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active 
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;


.check-element 
  padding:10px;
  border:1px solid black;
  background:white;

最后是 javascript 代码,别忘了包含库 angular.jsangular-animate.js

angular.module('App', ['ngAnimate']);

希望对你有帮助;)

【讨论】:

首先,感谢您提供的代码。其次,经过反思,定义自定义 css 样式正是开发人员更喜欢“fadeOut”功能的原因。这样我们就不必深入研究 CSS。我意识到很多人反对将 jQuery 与 Angularjs 一起包含,但为了避免自定义样式,这似乎是必要的。【参考方案2】:

使用ngAnimate module,您可以使用-transition-delay 指令在纯CSS 中执行此操作:

Plunker

HTML

<body ng-app="ngAnimate">
  Click me: <input type="checkbox" ng-model="checked">
  <br/>
  <img ng-show="checked" src="img1.jpg">
  <img ng-hide="checked" src="img2.jpg">
</body>

CSS

img 
  position: absolute;


.ng-hide-add-active 
  display: block!important;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;


.ng-hide-remove-active 
  display: block!important;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;


.ng-hide 
  opacity: 0;

【讨论】:

不幸的是需要位置:绝对。可能不是复杂页面的最佳解决方案。 刚刚将它用于占用相同空间的 2 个 div - 就像一个魅力!【参考方案3】:

您可以将 ng-animate 与 Angular 1.1.4 中的 ng-show (http://docs.angularjs.org/api/ngAnimate) 结合使用。或者,在模型被勾选时简单地应用 show 类并将您的节目和动画应用到该类。

<label><input type="checkbox" ng-model="showElement" />Show div</label>
<div ng-class="show: showElement"></div>

【讨论】:

感谢您的回复,但您认为您错过了重点。问题不在于如何将动画应用到展示中,而是两个动画(一个隐藏和一个展示)是从同一个模型元素触发的,并且动画需要连续运行,而不是同时运行。 hide 动画需要先运行到完成,然后是 show 动画。这可能吗? 啊,我明白了,我会通过从函数中设置 ng-class 来解决这个问题,我会更新我的示例。

以上是关于angularjs链式淡入/淡出过渡的主要内容,如果未能解决你的问题,请参考以下文章

在 css jQuery 中应用淡入淡出到粘性导航的过渡淡入淡出

在 jQuery 中与 CSS 中的过渡同时使用淡入淡出和淡出

CSS 过渡 - 仅在悬停时淡入淡出元素

同时为两个不同的元素淡入淡出过渡

如何在推送路由颤动上创建淡入淡出过渡?

将 Nivo Slider 更改为仅淡入淡出过渡