[AngularJS] AngularJS系列(5) 中级篇之动画

目录

 

ng动画实际帮我们在状态切换的时候 添加特定的样式 从而实现动画效果.

一般我们会通过C3来实现具体的动画.

 

CSS定义

ng-if

图(实际上,图并不能展现出什么):

 

 

HTML

?
1
2
3
4
5
6
7
8
<body ng-app="myApp">
    <button ng-click="show=!show">Toggle</button>
    <div ng-if="show" class="fade">Look Me</div>
 
    <script type="text/javascript">
        angular.module('myApp', ['ngAnimate'])
    </script>
</body>

 

CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.fade {
    transition: 1s linear all;
}
    .fade.ng-enter {
        opacity: 0;
    }
        .fade.ng-enter.ng-enter-active {
            opacity: 1;
        }
    .fade.ng-leave {
        opacity: 1;
    }
        .fade.ng-leave.ng-leave-active {
            opacity: 0;
        }

 

enter和leave的执行过程:

在元素创建的时候，会依次加上.ng-enter、.ng-enter-active的class，然后恢复为默认的class

同样在销毁的时候，会依次加上.ng-leave、.ng-leave-active的class，然后恢复为默认。

 

ngClass

这里只截取关键代码

?
1
2
3
4
<button ng-click="onOff=!onOff">Toggle</button>
<div ng-class="{on:onOff}" class="highlight">
    Highlight this box
</div>

CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
.highlight {
       transition: 1s linear all;
   }
       .highlight.on-add {
           background: red;
       }
       .highlight.on {
           background: yellow;
       }
       .highlight.on-remove {
           background: blue;
       }

效果图:

 

 

1.5.8支持的指令与动画样式:

DirectiveSupported Animations
{@link ng.directive:ngRepeat#animations ngRepeat} enter, leave and move
{@link ngRoute.directive:ngView#animations ngView} enter and leave
{@link ng.directive:ngInclude#animations ngInclude} enter and leave
{@link ng.directive:ngSwitch#animations ngSwitch} enter and leave
{@link ng.directive:ngIf#animations ngIf} enter and leave
{@link ng.directive:ngClass#animations ngClass} add and remove (the CSS class(es) present)
{@link ng.directive:ngShow#animations ngShow} & {@link ng.directive:ngHide#animations ngHide} add and remove (the ng-hide class value)
{@link ng.directive:form#animation-hooks form} & {@link ng.directive:ngModel#animation-hooks ngModel} add and remove (dirty, pristine, valid, invalid & all other validations)
{@link module:ngMessages#animations ngMessages} add and remove (ng-active & ng-inactive)
{@link module:ngMessages#animations ngMessage} enter and leave

 

 

JS定义

HTML

?
1
2
3
4
5
6
<body ng-app="myApp" ng-init="items=[1,2,3,4,5,6]">
    <button ng-click="show=!show">Toggle</button>
    <div ng-if="show" ng-repeat="item in items" class="slide">
        {{ item }}
    </div>
</body>

js操作

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
angular.module('myApp', ['ngAnimate'])
    .animation('.slide', [
        function () {
            return {
                enter: function (element, doneFn) {
                    jQuery(element).fadeIn(1000, doneFn);
                },
 
                move: function (element, doneFn) {
                    jQuery(element).fadeIn(1000, doneFn);
                },
 
                leave: function (element, doneFn) {
                    jQuery(element).fadeOut(1000, doneFn);
                }
            }
        }
    ]);

其中的enter move leave 对应状态变化的事件,详情建议参考源码中的$$AnimateJsProvider.

 

本文地址:http://www.cnblogs.com/neverc/p/5924789.html

posted @   Never、C  阅读(827)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
历史上的今天：
2014-09-30 百度分页样式代码 css+c#
点击右上角即可分享
微信分享提示
SQL AI 助手