Как затухать изображение, которое динамически устанавливается с помощью Angular?

Я использую Anuglar для установки изображения, которое будет использоваться в качестве фонового изображения для моей страницы. В настоящее время изображение загружается сверху вниз, и оно не выглядит великолепно. Я хотел бы затухать в изображении (или даже загружать изображение из размытого представления в фактическое изображение). Все, кроме загрузки сверху вниз. Любые советы о том, как это сделать? Я вижу другие сообщения, которые показывают использование javascript/jquery, но я не уверен, как интегрировать его в мой угловой код.Как затухать изображение, которое динамически устанавливается с помощью Angular?

Шаблон

<body ng-controller="MainCtrl" ng-style="heroImage"> 

    //rest of the html 

</body>

Javascript

$scope.heroImage = { 
    'background': 'linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url('+ $scope.place["imageLink"] +')', 
    'background-size': 'cover', 
    'height': '100vh', 
    'background-repeat': 'no-repeat' 
};

источник

2016-07-20 sharataka

Вы ищете как этот эффект замирания? http://www.web2feel.com/freeby/scroll-effects/index.html – eronax59

Вы можете использовать другой Div элемент или просто Img сам обернуто тело и анимировать прозрачность всякий раз, когда вы хотите

HTML

<body> 
    <div id='background'> 
     <img ng-src='yourimage' ng-class="{visible:imageVisible}"/> 
    </div> 
</body>

CSS

body { 
    background: transparent; 
} 
#background > img { 
    opacity: 0; 
    display: fixed; //or absolute 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    height: 100%; 
    width: 100%; 
    z-index: -1; 
    transition: all 1s; 
} 
#backcgound > img.visible { 
    opacity: 1; 
}

$scope.imageVisible = true;

это хороший подход только для одного изображения, чтобы показать на странице загрузки, но если вы хотите использовать несколько изображений FadeIn то лучший подход будет холст или несколько изображений

<body> 
    <div id="background"> 
     <img ng-reapeat="image in images track by $index" ng-src="image.src" ng-class="{visible:image.visible}"/> 
    </div> 
</body>

, а затем вы можете использовать $ interval для изменения видимого изображения путем изменения непрозрачности JS

images=[{ 
    src:'yoursrc',visible:false 
}, { 
    src:'yoursrc',visible:false 
}, { 
    src:'yoursrc',visible:false 
}, 
... 
]

источник

2016-07-20 17:44:03 neuronet

Вы попробовали прогрессивный jpeg? Это может быть самое простое решение.

источник

2016-07-23 11:57:44 daymosik

Если я правильно понимаю, то, о чем вы просите, было ранее ответом. Посмотрите на это: How can I use ng-animate with ui-view rather than ng-view?

Использование [ui-view].ng-enter & [ui-view].ng-leave, это создаст замирание в анимации, как только вы входите и покинуть страницу, которая работает очень хорошо для каждой страницы в вашем веб-приложение

источник

2016-07-25 15:42:50 Juan

При условии, что вы либо хостинг изображения или что нет ни одного CORS вопросов, вы можете подождать, пока изображение не загружаются, как это с Угловым:

angular.module('app',[]) 
.controller('ctrl',function($scope){ 
    $scope.style = { 
     background: 'red' 
    }; 
    $scope.link = 'https://upload.wikimedia.org/wikipedia/en/f/f6/Not_A_Hero_Logo.png'; 
    var image = new Image(); 
    image.onload = function(){ 
     $scope.$apply(function(){ 
      $scope.style.background = 'url(' + $scope.link + ') center/contain no-repeat'; 
     }); 
    }; 
    image.src = $scope.link; 
})

И в вашем HTML вы бы: <div ng-style="style"></div>

Plunker: https://plnkr.co/edit/rC2IeU8bulOXB6HWlEK9?p=preview

EDIT: Директива подход, основанный на Plunker: https://plnkr.co/edit/FRJla7MRu2JIaSYx7lTb?p=preview

источник

2016-07-29 02:09:45

Вы должны использовать директиву, хотя * –

Я очень рекомендую Animate.css, который предлагает широкий выбор анимации с помощью @keyframes.

Вы можете написать супер чистый код и просто добавить animation атрибутов внутри вашего ng-style.Просто выберите анимацию вам нравится, и установить длительность, и вуаля, вы хорошо идти:

$scope.heroImage = { 
    'background': 'linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)), url("https://hd.unsplash.com/photo-1452711932549-e7ea7f129399") center', 
    'background-size': 'cover', 
    'height': '100vh', 
    'background-repeat': 'no-repeat', 
    //set fadeIn as the animation, animate over duration of 1second. 
    'animation':'fadeIn 1s', 
    };

Здесь работает plnkr

P.S. Конечно, не забудьте включить animate.css в качестве таблиц стилей. и он должен будет загрузиться до ваших собственных таблиц стилей.

<!--load animate.css first--> 
<link rel="stylesheet" href="animate.css" /> 
<!--Your own stylesheet--> 
<link rel="stylesheet" href="Site.css" />

источник

2016-07-29 16:35:33 CozyAzure

-1

У меня была похожая задача некоторое время назад, и решить ее сжатия Jpeg изображения или вещь под названием прогрессирующее Jpeg

прочитать на википедии о compression of JPEG

ПРИМЕЧАНИЕ

формат JPEG лучше всего подходит для Интернета.

РЕШЕНИЕ РАБОТАЛ ДЛЯ МЕНЯ

Я использовал this сервис для сжатия моих Jpeg файлы

Теперь мои site работы действительно хорошие

источник

2016-07-29 17:47:21

Вы можете сделать это с угловой директивой как так:

angular.module('app', []) 
    .directive('backgroundimg', function() { 
    return { 
     link: function(scope, element, attribs) { 
     let img = new Image(), 
      s = element[0].style; 
     s.transition = 'background-image 1s ease-in-out'; 
     s.backgroundSize = attribs.backgroundsize || '800px 600px'; 
     s.backgroundImage = 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)'; //1x1px transparent gif 

     img.onload = function() { 
      s.backgroundImage = 'url(' + attribs.backgroundimg + ')'; 
     }; 
     img.src = attribs.backgroundimg; 
     } 
    }; 
    });

Это позволяет объявить ваш backgroun d, который затем будет исчезать после загрузки. Чтобы затухать правильно, нам нужно, чтобы изображение исчезло. Вы можете установить свой собственный в свойстве стиля элемента, иначе он по умолчанию будет иметь 1px белое изображение.

Пример HTML:

<body ng-app="app" backgroundimg="mybackground.jpg" backgroundsize="600px 400px">

Если вы хотите, чтобы исчезнуть в от размытого изображения, просто добавьте его в стиле:

<body ng-app="app" backgroundimg="mybackground.jpg" backgroundsize="600px 400px" style="background-image:url(mythumbnail.gif)" />

или даже лучше, кодировать его рядный первый с инструментом подобный this. (Не забудьте изменить его сначала)

Другие стили вы можете сделать с помощью CSS.

Full Plnkr Example

источник

2016-07-29 21:01:01 jornare

Как затухать изображение, которое динамически устанавливается с помощью Angular?

ответ

Смежные вопросы