利用ngAnimate和CSS3动画库实现备忘录小界面

最新推荐文章于 2024-08-27 08:27:33 发布

mayuan2011

最新推荐文章于 2024-08-27 08:27:33 发布

阅读量259

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mayuan2011/article/details/83023231

利用ngAnimate和CSS3动画库实现备忘录小界面

Angular JS的ngAnimate模块简化了Web动画开发的过程，在此整合ngAnimate和CSS动画库来实现备忘录程序的界面效果。
在此参照《AngularJS入门与进阶江荣波著12.3.4节》

功能简介

当我们在文本框输入待完成事项后，按下Enter键，输入的内容就会添加到下方列表中；
选中条目中的复选框，文字上回家一条删除线，表示该事项已经被处理；
单击条目右侧X号，可以删除单挑记录；
单击“清除所有事项”按钮后，会把列表中的数据全部清空。

具体代码实现

现将代码展示如下：

<!DOCTYPE html>
<html ng-app="memModule">
<head>
    <meta charset="utf-8">
    <title>备忘录</title>
    <link rel="stylesheet" href="../CSS/animate.css" />
    <link rel="stylesheet" href="../CSS/bootstrap.min.css" />
    <script src="../JS/angular.js"></script>
    <script src="../JS/angular-extends/angular-animate.js"></script>
    <style>
        .todo-item{
   
   
            transition:color 0.6s,background-color 0.3s;
        }
        .todo-item label{
   
   
            display: block;
        }
        .todo-complete{
   
   
            ba