AngularJS中实现显示或隐藏动画效果的3种方式

时间：2023-01-25 21:31:54

本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果。

通过CSS方式实现显示/隐藏动画效果

思路：

→npm install angular-animage
→依赖：var app = angular.module("app",["ngAnimate"]);
→controller中一个变量接收bool值
→界面中提供一个按钮，点击改变bool值
→界面中显示/隐藏的区域提供ng-if和controller中的bool值绑定

app.js

var app = angular.module("app",["ngAnimate"]);

app.controller("AppCtrl", function(){

    this.toggle = true;

})

index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title></title>

  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>

  <link rel="stylesheet" href="styles.css"/>

</head>

<body ng-app="app" ng-controller="AppCtrl as app">

<button class="btn" ng-click="app.toggle=!app.toggle">Toggle Animation</button>

<div class="toggle" ng-if="app.toggle">Some content here</div>

<script src="../node_modules/angular/angular.min.js"></script>

<script src="../node_modules/angular-animate/angular-animate.min.js"></script>

<script src="app.js"></script>

</body>

</html>

styes.css

.toggle{

  -webkit-transition: linear 1s;

  -moz-transition: linear 1s;

  -ms-transition: linear 1s;

  -o-transition: linear 1s;

  transition: linear 1s;

}

.toggle.ng-enter{

  opacity:;

}

.toggle.ng-enter-active{

  opacity:;

}

.toggle.ng-leave{

  opacity:;

}

.toggle.ng-leave-active{

  opacity:;

}

通过animation方法实现显示/隐藏动画效果

app.animation("某个类名", function(){

    return {

        leave: function(element, done){

        },

        enter: function(element, done){

        }

    }

})

animation可以在某个类名上加上leave,enter事件，leave和enter函数内部如何实现动画效果呢？可以通过TweenMax.min.js实现。

app1.js

ar app = angular.module("app",["ngAnimate"]);

app.controller("AppCtrl", function(){

    this.toggle = true;

})

app.animation(".toggle", function(){

    return {

        leave: function(element, done){

            //element.text("nooooo");

            TweenMax.to(element, 1, {opacity:0, onComplete:done})

        },

        enter: function(element, done){

            TweenMax.from(element, 1, {opacity:0, onComplete:done})

        }

    }

})

index1.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title></title>

  <link rel="stylesheet" href="../node_modules/topcoat/css/topcoat-desktop-light.min.css"/>

</head>

<body class="well-lg" ng-app="app" ng-controller="AppCtrl as app">

<button class="topcoat-button--large--cta" ng-click="app.toggle = !app.toggle">点我</button>

<hr/>

<div class="topcoat-notification toggle" ng-if="app.toggle">I'm too your to fade</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

<script src="../node_modules/angular/angular.min.js"></script>

<script src="../node_modules/angular-animate/angular-animate.min.js"></script>

<script src="app1.js"></script>

</body>

</html>

其中，npm install topcoat是一个很好的样式库。

使用direcive的方式实现显示/隐藏动画效果

是否可以在显示/隐藏的div部分加上一个属性，比如hide-me="app.isHidden",hide-me这个属性监控app.isHidden,根据值的变化情况再来决定是否显示。

app3.js

var app=angular.module('app',["ngAnimate"]);

app.controller("AppCtrl", function(){

    this.isHidden = false;

    this.fadeIt = function(){

        //TweenMax.to($("#my-badge"), 1, {opacity:0})

        this.isHidden = !this.isHidden;

    }

})

app.directive("hideMe", function($animate){

    return function(scope, element, attrs){

        scope.$watch(attrs.hideMe, function(newVal){

            if(newVal){

                //TweenMax.to(element, 1, {opacity:0});

                $animate.addClass(element, "fade");

            } else{

                $animate.removeClass(element, "fade");

            }

        })

    }

})

app.animation(".fade", function(){

    return {

        addClass: function(element, className){

            TweenMax.to(element, 1, {opacity:0});

        },

        removeClass: function(element, className){

            TweenMax.to(element, 1, {opacity:1});

        }

    }

})

index3.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title></title>

  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>

</head>

<body ng-app="app" ng-controller="AppCtrl as app">

<button id="my-button" class="btn-primary" ng-click="app.fadeIt()">Click to fade</button>

<div id="my-badge" class="badge" hide-me="app.isHidden">Fade me</div>

<script src="../node_modules/jquery/dist/jquery.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

<script src="../node_modules/angular/angular.min.js"></script>

<script src="../node_modules/angular-animate/angular-animate.min.js"></script>

<script src="app3.js"></script>

</body>

</html>

AngularJS中实现显示或隐藏动画效果的3种方式的更多相关文章

  1. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  2. android view控件的显示和隐藏动画效果

    // 显示动画 mShowAction = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO ...

  3. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  4. HTML5 动画效果的多种实现方式

    HTML5 动画效果的多种实现方式 1.  CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...

  5. ps &vert; grep app 命令不显示grep app本身进程的几种方式

    ps | grep app 命令不显示grep app本身进程的几种方式 使用ps命令查询进程,常常我们不想打印出"ps | grep app"这个当前进程,比如如下: [root ...

  6. js中 json对象与json字符串相互转换的几种方式

    以下总结js中 json对象与json字符串相互转换的几种方式: 一.JSON对象转化为JSON字符串 1.使用JSON.stringify()方法进行转换 该方法不支持较老版本的IE浏览器,比如:i ...

  7. jqury&plus;animation&plus;setTimeOut实现渐变显示与隐藏动画

    初始效果 实现效果 1,编写HTMl结构代码 <div class="box"> <i class="icon"></i> ...

  8. Web开发中的显示与隐藏

    大多数编程语言,在平开发过程中,都是会遇到一些特殊的场景,需要实现显示或者隐藏来达到我们想要的效果:然而实现的方式有多种,今天就写一下,希望可以帮到各位. 小编我学习前端1年了,特意写写博客来回顾一下 ...

  9. css中实现显示和隐藏（转）

    CSS中的display和visibility      在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...

随机推荐

  1. 基于 HTML5 的 Web SCADA 报表

    背景 最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求.一个完整的报表,一般包含了筛选操作区.表格.Chart.展板等多种元素,而其中的数据表格是最常用的控件.在以往的工业项目 ...

  2. Files 的值&OpenCurlyDoubleQuote;&lt&semi;&lt&semi;&lt&semi;&lt&semi;&lt&semi;&lt&semi;&lt&semi; &period;mine”无效。路径中具有非法字符

    解决冲突,告诉SVN这个问题已解决(Resolved). 一般更简单些:在你的工程OBJ/DEBUG目录下,找到 工程名.csproj.FileListAbsolute.txt的文件打开并删除含有'& ...

  3. svn钩子（hooks）

    首先你需要搭建出自己的svn环境出来,并能成功导入导出,并且了解svn,这是看这篇文章的前提.... 出于公司开发部需要svn同步更新服务器代码,需要用到svn钩子(hooks)技术,以前从来没听过, ...

  4. Codeforces 296C Greg and Array

    数据结构题.个人认为是比较好的数据结构题.题意:给定一个长度为n的数组a,然后给定m个操作序列,每个操作:l, r, x将区间[l, r]内的元素都增加a,然后有k个查询,查询形式是对于操作序列x,y ...

  5. 基于内容的图片检索CBIR（Content Based Image Retrieval）简介

    传统的图像检索过程,先通过人工对图像进行文字标注,再利用关键字来检索图像,这种依据图像描述的字符匹配程度提供检索结果的方法,简称“以字找图”,既耗时又主观多义.基于内容的图像检索客服“以字找图”方式的 ...

  6. date&comma;datetime&comma;timestamp 的区别

    date 表示年月日,如YY-MM-DD datetime 表示年月日和时间信息,如YY-MM-DD HH:MM:SS datestamp 和datetime表示的信息相同,但时间范围不同 时间范围 ...

  7. 多机同步管理hexo博客

    转载自:https://www.zhihu.com/question/21193762/answer/79109280 一.关于搭建的流程 创建仓库,<your github username& ...

  8. MassTransit&amp&semi;Sagas分布式服务开发ppt分享

    saga,与分布式相关,最早被定义在Hector Garcia-Molina和Kenneth Salem的论文"Sagas"中.这篇论文提出了一个saga机制来作为分布式事务的替代 ...

  9. LVM方式安装Ubuntu 系统

    重装Ubuntu系统,使用LVM管理磁盘,最好不要使用默认的LVM安装方式,而应挂载U盘启动盘,进行物理磁盘分区,创建物理卷.卷组.虚卷(即创建LVM系列操作),在安装系统时将虚卷挂载到文件目录上.将 ...

  10. 公共语言运行时支持&lpar;&sol;clr&rpar;

    项目属性 -> 配置属性 -> “常规”里开启“公共语言运行时支持(/clr)

相关文章