在页面加载时淡入图像答案

【问题标题】：Fade in image on page load在页面加载时淡入图像
【发布时间】：2018-02-10 19:52:10
【问题描述】：

如何使用 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; }

【问题讨论】：

标签： css angularjs ng-animate

【解决方案1】：

我用一行 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;     
}

【讨论】：

【解决方案2】：

你忘记在你的对象标签上添加动画类

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

【讨论】：

在 css 中你的动画持续时间是 .2s == 200ms。把它变大，这样你就可以看到不同了
好的，我已经把它改成了.animation { opacity:0; transition:all 5s ease-in-out; }，但还是不行
在你给 plunker 的例子中添加了工作正常

【解决方案3】：

您需要将 class="animation" 添加到对象元素中

【讨论】：

是的，plnkr.co/edit/O09qHjSWzIHgJa60gvuo 你设置了别名为 vm 的 ng-controller 了吗？