Question

我遇到了这个问题，我有一个更新并显示图像列表的div标签。我希望在从一组图像到另一组图像的过渡中更新div标签中的值时添加动画。

在这里你可以看到底部有一组女孩头发的图像。当用户转到其他选项卡时，会出现一组不同的图像。我希望在那个过渡期间有动画。

过渡的AngularJS部分如下：

<div ng-swipe-left="avDesignController.onSwipeLeftAction()" ng-swipe-right="avDesignController.onSwipeRightAction()">
    <!-- CUSTOMIZABLE TAB BAR -->
    <div class="tab-bar-container" >
        <div class="scrollmenutab">

            <!-- CUSTOMIZABLE MENU -->
            <div ng-repeat="customizable in customizables"
                 ng-click="avDesignController.onCustomizableClicked($event)"
                  style="display: inline;">
                    <a ng-if="customizable.allowed == 1">
                        <div ng-class="{selected: $index==currentIndex}">
                            <div ng-if="customizable.name == 'Hair'">
                                <img class="scrollmenutab-icon"
                                                    id="{{customizable.name}}-{{$index}}"
                                                    src="/app/app_resources/icons/{{genderImage}}Hair.png">
                            </div>
                            <div ng-if="customizable.name != 'Hair'">
                                        <img class="scrollmenutab-icon"
                                            id="{{customizable.name}}-{{$index}}"
                                            src="/app/app_resources/icons/{{customizable.name}}.png">
                            </div>
                        </div>
                    </a>
            </div> <!-- MENU : END -->

        </div>
    </div>

    <!-- CUSTOMIZABLES -->
    <div class="avdesign-item-container" id="avdesign-item-container">
        <div id="four-columns" class="grid-container" >

            <!-- LOAD CUSTOMIZABLES IF NOT LAST ITEM IN TAB -->
            <ul ng-if="currentIndex < (customizables.length - 1)"
                class="rig columns-4">
                <li ng-repeat="customizableItem in currentCustomizable.customizable_item">
                    <img class="tab-icon"
                         src="/app/app_resources/resources/av/{{avatarInfo.name}}/as/{{customizableItem.as}}"
                         id="customizable-{{$index}}"
                         ng-click="avDesignController.onCustomizedItemClicked($event)"
                         ng-class="{highlight: customizableItem.id==currentID}">
                </li>
            </ul>

            <!-- LOAD OUTFITS (FROM avatarOutfit) IF LAST ITEM IN TAB -->
            <ul ng-if="currentIndex == (customizables.length - 1)"
                class="rig columns-outfit">
                <div ng-repeat="brand in outfitBrand" ng-style="{'margin-bottom':'1vh'}">
            <div class="brand-icon" >
                            <img src="/app/app_resources/icons/{{brand.bg_image}}">
            </div>
                <li ng-repeat="outfit in brand.outfitList">
                    <img class="outfit-icon"
                         src="/app/app_resources/resources/av/{{avatarInfo.name}}/as/{{outfit.as}}"
                         id="outfit-{{$index}}"
                         ng-click="avDesignController.onOutfitItemClicked($event,$parent.$index)"
                         ng-class="{highlightOutfit: $index==avatar.outfit_index && $parent.$index==indexParent}">
                </li>
            </div>
            </ul>

        </div>
    </div>
</div>

JS部件中调用的函数相应地更新图像。

所以问题是如何在更新时为同一元素添加过渡动画，因为我们永远不会离开或输入该元素标记

Answer 1

您的问题已经回答here

HTML

router.post('/restful', function (req, res) {
    var options = {
        uri: 'http://192.168.1.6:8080/sampleRest/RequestxARC/sample',
        method: 'post'

    };
    var parameters = "Hi";

    var responseFromClient = '';
    request(options, function (error, response, body, parameters) {
        if (!error && response.statusCode == 200) {
            responseFromClient = body;
        }
        else {
            responseFromClient = 'Not Found';
        }
        console.log(responseFromClient);
        //res.json(resss);
        req.flash('response_msg', responseFromClient);

        if (responseFromClient != 'Not Found') {
            res.redirect('/users/restful');
        }
        else {
            res.redirect('/users/restful');
        }
    });
});

并在控制器中 var app = angular.module（＆＃39; app＆＃39;，[]）;

<div ng-controller="c">
<div id={{my_id}} width={{widthOfOutsideWrapper}} height={{heightOfOutsideWrapper}}>
       <img ng-src="{{src}}" imageonload />
</div>
</div>

和http://jsfiddle.net/2CsfZ/855/工作示例可在此处获取

Answer 2

上述答案非常有用，对许多人来说可能会有很大的帮助。

但我的问题的答案是你根本无法做到的。 ngAnimate＆＃39; ngEnter和ngLeave将无法识别更改，除非更改元素而不更改元素内部。

因此，需要应用某些hack，例如使用ngRepeat使用不同的id's进行不同的更新，以适应元素或需要执行其他操作。

AngularJS：更新div标签时添加动画

2 个答案: