AngularJS(14)-动画

电玩女神 2021-12-15 03:27 199阅读 0赞

AngularJS 提供了动画效果，可以配合 CSS 使用。

AngularJS 使用动画需要引入 angular-animate.min.js 库。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <style>
            div {
                transition: all linear 0.5s;
                background-color: lightblue;
                height: 100px;
                width: 100%;
                position: relative;
                top: 0;
                left: 0;
            }
            .ng-hide {
                height: 0;
                width: 0;
                background-color: transparent;
                top: -200px;
                left: 200px;
            }
        </style>
        <script src="angular-1.4.1/angular.min.js"></script>
        <script src="angular-1.4.1/angular-animate.min.js"></script>
    </head>
    <body ng-app="ngAnimate">
      <h1>隐藏DIV:<input type="checkbox" ng-model="myCheck"></h1>
      <div ng-hide="myCheck"></div>
      <script>
          var app = angular.module('myApp',['ngAnimate']);
      </script>
    </body>
    </html>

转载于:https://www.cnblogs.com/yk123/p/5916971.html

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用 AngularJS 创建出色的动画效果？

AngularJS 是一款功能强大的前端 JavaScript 框架，它提供了丰富的功能和工具，使得开发者能够轻松构建交互式的单页面应用程序（SPA）。其中一个重要的特性就是动

忘是亡心i/ 2024年03月17日 20:21/ 0 赞/ 65 阅读

相关 AngularJS 世界------Angularjs简介

AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过`<script>` 标签添加到 HTML 页面。 AngularJS 通过

末蓝、/ 2023年02月08日 13:00/ 0 赞/ 29 阅读

相关 vue14 动画-自学视频

01 动画truansition > vue本身并不产生动画，它会在元素显示与隐藏时候自动添加一些类名，程序员可以通过这些类名来设计动画 Vue 提供了内置的过渡

﹏ヽ暗。殇╰゛Y/ 2022年12月18日 15:53/ 0 赞/ 137 阅读

相关 SDL编程入门（14）动画精灵和VSync

动画精灵和VSync 动画简而言之就是展示一个又一个的图像来制造运动的假象。在这里我们将展示不同的精灵来制作一个简笔画的动画。假设我们有以下动画帧（这清楚地表明我不是

男娘i/ 2022年12月08日 14:22/ 0 赞/ 196 阅读

相关 AngularJS入门之动画

转自[点击打开链接][Link 1] ———————————————————————— AngularJS中ngAnimate模块支持动画效果，但是ngAnimate模块并

女爷i/ 2022年07月29日 09:24/ 0 赞/ 164 阅读

相关 AngularJs 自定义ajax服务为请求添加加载动画

一、此处示例使用iconic的动画加载 1.自定义ajax服务封装 //全局配置请求处理 app.service('$ajax', function ($h

电玩女神/ 2022年07月12日 04:28/ 0 赞/ 166 阅读

相关 AngularJS------认识AngularJS

之前在C\中也经常使用MVC开发模式，对其的使用有一定的了解，但是现在需要学习AngularJS，这是纯前台的JS代码，那么为什么需要学习这个呢，就是想将验证这里全部在前台执行

拼搏现实的明天。/ 2022年05月31日 06:42/ 0 赞/ 270 阅读

相关 AngularJS -AngularJS特性

转载博客：[https://www.cnblogs.com/stephenykk/p/3817063.html][https_www.cnblogs.com_stephenyk

本是古典何须时尚/ 2022年05月17日 13:23/ 0 赞/ 222 阅读

相关 AngularJS(14)-动画

AngularJS 提供了动画效果，可以配合 CSS 使用。 AngularJS 使用动画需要引入 angular-animate.min.js 库。 <!DOCT

电玩女神/ 2021年12月15日 03:27/ 0 赞/ 200 阅读

相关 MSDN 教学短片 WPF 14(2D动画之—Trigger)

2D动画之—Trigger 我们知道Trigger是一个触发器，它按条件应用属性值或执行操作。要注意的是：若要使触发器有意义，必须在 Trigger 上同时指定 Pr

一时失言乱红尘/ 2021年11月02日 15:28/ 0 赞/ 264 阅读