在页面加载时淡入图像

Question

如何使用Angular JS在页面加载时淡入图像，目前这是我在AngularJS上的代码，但它不起作用（基于：http://plnkr.co/edit/ncqEB3PafIWbwv0UH1QG?p=preview）

查看

<object type="image/svg+xml" data="img/logo-blue.svg" class="navbar-logo" ng-class="{'fade-in': vm.fade }"></object>

控制器

vm.fade = true;

CSS

.animation { opacity:0; transition:all 200ms ease-in-out; }

.animation.fade-in { opacity:1; }

Answer 1

您忘记在对象标记

上添加动画类

<object type="image/svg+xml" data="img/logo-blue.svg" class="animation navbar-logo" ng-class="{'fade-in': vm.fade }"></object>

Answer 2

您需要将class =“animation”添加到object元素

Answer 3

我用一行javascript和一个css样式做到了。

这就在我想要淡入的元素之前：

<div id = 'fadewrap' >    
<script>
document.getElementById("fadewrap").style.opacity = 1;                      
</script>


#fadewrap {
    opacity: 0;
   -webkit-transition: all 1.75s ease;
   -moz-transition: all 1.75s ease;
   -ms-transition: all 1.75s ease;
   -o-transition: all 1.75s ease;
    transition: all 1.75s ease;     
}