如何使用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; }
答案 0 :(得分:1)
您忘记在对象标记
上添加动画类 <object type="image/svg+xml" data="img/logo-blue.svg" class="animation navbar-logo" ng-class="{'fade-in': vm.fade }"></object>
答案 1 :(得分:1)
您需要将class =“animation”添加到object元素
答案 2 :(得分:0)
我用一行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;
}