个人中心
gpt4 book ai didi

javascript - 从 jquery 到 AngularJS 动画

转载 作者：太空宇宙 更新时间：2023-11-04 10:56:14 25 4
gpt4 key购买 nike

我开始学习一些 jquery，但不得不转向 Angularjs。当我试图重新创建这样的东西时，我有点迷茫:http://codepen.io/marlenesco/full/NqOozj/

我会用它发布一些 Javascript..codepen 有很好的工作示例......

$(function() {
    $('.material-card > .mc-btn-action').click(function () {
        var card = $(this).parent('.material-card');
        var icon = $(this).children('i');
        icon.addClass('fa-spin-fast');

        if (card.hasClass('mc-active')) {
            card.removeClass('mc-active');

            window.setTimeout(function() {
                icon
                    .removeClass('fa-arrow-left')
                    .removeClass('fa-spin-fast')
                    .addClass('fa-bars');

            }, 800);
        } else {
            card.addClass('mc-active');

            window.setTimeout(function() {
                icon
                    .removeClass('fa-bars')
                    .removeClass('fa-spin-fast')
                    .addClass('fa-arrow-left');

            }, 800);
        }
    });
});

我不确定这是我会完全用 CSS 做的事情还是我会用 Ng animate 做的事情。如果有人有任何资源可以让我朝着正确的方向前进，那将是不可思议的!

谢谢

最佳答案 

<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="MyController">
<div class="container">

<div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="user in users">
            <article class="material-card {{colors[$index+1]}}" id="card{{$index}}">
                <h2>
                    <span class="raleway">{{user.name}}</span>
                    <strong>
                        <i class="fa fa-fw fa-star"></i>
                        {{user.email}}
                    </strong>
                </h2>
                <div class="mc-content">
                    <div class="img-container">
                        <img class="img-responsive" src="{{user.image}}">
                    </div>
                    <div class="mc-description">
                        {{user.desc}}
                    </div>
                </div>
                <a class="mc-btn-action" ng-click="make_active($index)">
                    <i class="fa fa-bars" id="iconspin{{$index}}"></i>
                </a>
                <div class="mc-footer">
                    <h4>
                        Social
                    </h4>
                    <a class="fa fa-fw fa-facebook"></a>
                    <a class="fa fa-fw fa-twitter"></a>
                    <a class="fa fa-fw fa-linkedin"></a>
                    <a class="fa fa-fw fa-google-plus"></a>
                </div>
            </article>
        </div>

    </div>
</div>

</div>
<script>
var app = angular.module('myApp', ['angular.filter']);

app.controller('MyController', function ($scope,$http,$sce) 
{
    $scope.colors = ['material-card','Red','Pink','Purple','Indigo','Blue','Light-Blue','Cyan','Teal','Green','Light-Green','Lime','Yellow','Amber','Orange','Deep-Orange','Brown','Grey','Deep-Purple'];

    $scope.make_active = function(id)
        {   
            if(!$("#card"+id).hasClass("mc-active"))
            {   
                $("#iconspin"+id).addClass('fa-spin-fast');

                $("#card"+id).addClass("mc-active");
                window.setTimeout(function () 
                {
                    $("#iconspin"+id).removeClass('fa-bars').removeClass('fa-spin-fast').addClass('fa-arrow-left');
                }, 500);
            }
            else
            {
                $("#iconspin"+id).addClass('fa-spin-fast');
                $("#card"+id).removeClass("mc-active");
                window.setTimeout(function ()
                {
                    $("#iconspin"+id).removeClass('fa-arrow-left').removeClass('fa-spin-fast').addClass('fa-bars');
                }, 500);
            }
        }

    $scope.users = [{'name':'Paresh Gami','email':'gamiparesh5@gmail.com','desc':'He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...','image':'http://u.lorenzoferrara.net/marlenesco/material-card/thumb-christopher-walken.jpg'},{'name':'Paresh Gami','email':'gamiparesh5@gmail.com','desc':'He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...','image':'http://u.lorenzoferrara.net/marlenesco/material-card/thumb-christopher-walken.jpg'},{'name':'Paresh Gami','email':'gamiparesh5@gmail.com','desc':'He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...','image':'http://u.lorenzoferrara.net/marlenesco/material-card/thumb-christopher-walken.jpg'},{'name':'Paresh Gami','email':'gamiparesh5@gmail.com','desc':'He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...','image':'http://u.lorenzoferrara.net/marlenesco/material-card/thumb-christopher-walken.jpg'},
    ]

});
</script>
</body>
</html>

复制整个代码并运行它，但您必须通过此链接复制粘贴 css

https://github.com/marlenesco/material-cards/blob/master/dist/material-cards.css

关于javascript - 从 jquery 到 AngularJS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34602757/

25 4 0
文章推荐： python - stdout=subprocess.PIPE 和 stdout=PIPE 之间的区别
文章推荐： java - Bootstrapping Maven 的用例
文章推荐： java - 如果两个用户定义的类加载器加载同一个类，JVM 内部如何处理？
文章推荐： Python - Tkinter - canvas.move 不工作
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com