IE11使用ngAnimate和ngShow闪烁

时间:2014-11-20 23:01:40

标签: javascript html css angularjs

请在IE 11中查看此jsfiddle:http://jsfiddle.net/1op08u1o/4/。如果单击链接2,然后快速单击链接1,有时您可以看到闪烁的橙色块被绿色框击倒的地方在橙色块消失之前。

这似乎只发生在IE11中,并且只有在我包含ngAnimate模块时才会发生。即使没有css过渡,只是显示或隐藏,仍然有一个闪烁。可能需要几次尝试才能看到闪烁发生。我使用角度1.3.3。有没有人见过这样的事情?

HTML:

<div ng-app="demo" ng-controller="MainCtrl">
    <div class='float-left'>
        <a href="#" ng-click="itemClicked(1)">Link 1</a>
        <a href="#" ng-click="itemClicked(2)">Link 2</a>
    </div>
    <div class="float-left" id="content">
        <div id='link-1' ng-show="link1Active">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae ornare neque, ac suscipit elit. Aliquam erat volutpat. Aenean ultricies sapien orci, eu eleifend nisl interdum ultrices. In nec egestas felis, et feugiat magna. In efficitur metus urna, sit amet porta libero vehicula et. Suspendisse eleifend placerat est sit amet facilisis. Curabitur fringilla non odio ut dictum. In ullamcorper neque vitae ligula sodales pellentesque. Sed feugiat lectus ut laoreet porttitor. Nunc sollicitudin non mi sollicitudin sodales.
        </div>
         <div id='link-2' ng-show="link2Active">
           Nam finibus lectus nisl, sit amet lobortis orci facilisis vitae. Sed aliquet, leo sit amet faucibus feugiat, mauris neque sodales neque, nec ullamcorper libero mauris eget lectus. Donec magna libero, laoreet sit amet sapien non, mattis dignissim diam. Morbi rutrum dapibus tellus, at ultrices ex tristique at. Etiam suscipit faucibus auctor. Cras a scelerisque augue. Pellentesque ultricies feugiat metus, non maximus purus egestas vitae. Proin convallis enim elit, sit amet ornare risus ultricies at. Praesent semper risus accumsan, efficitur sapien ac, placerat dolor. Curabitur consectetur eros in tellus maximus varius. Vestibulum porta mollis posuere. Vestibulum vel massa vitae leo suscipit elementum quis nec justo. Quisque pretium convallis justo, id fringilla felis ullamcorper vel. Nunc in malesuada orci.
        </div>
    </div>
</div>

CSS:

a {
    display: block;
    margin: 10px;
}

.float-left {
    float: left;
}

#content {
    width: 75%;
}

#link-1 {
    background-color: green;
}

#link-2 {
    background-color: orange;
}

.ng-hide-remove{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;

    opacity: 0;
}
a {
    display: block;
    margin: 10px;
}

.float-left {
    float: left;
}

#content {
    width: 75%;
}

#link-1 {
    background-color: green;
}

#link-2 {
    background-color: orange;
}

.ng-hide-remove{
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;

    opacity: 0;
}

.ng-hide-remove-active {
    opacity: 1;
}

JS:

angular.module('demo', ['ngAnimate'])
 .controller('MainCtrl', function($scope) 
         {
             $scope.itemClicked = function(arg)
             {
                 if (arg == 1) {
                     $scope.link2Active = false;
                     $scope.link1Active = true;
                 }
                 else {
                     $scope.link2Active = true;
                     $scope.link1Active = false;
                 }

             }
         });

0 个答案:

没有答案
相关问题