javascript/angularjs - fade out

Question

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

Вот мое мнение:

<div style="overflow: scroll;"> 
    <img id="fullImage" ng-src="{{imageUrl}}" imageonload> 
    <img id="drag-arrows" class="drag-arrows" ng-src="images/icon-drag.png"/> 
    <h3 id="optionName" class="optionName">{{ optionName }}</h3> 
    <a class="close-reveal-modal" ng-click="cancel()"><img class="cancel-icon" ng-src="images/icon-close-fullscreen.png"></a> 
</div> 

Вот моя директива, которая прослушивает TouchMove события, чтобы скрыть значок перетаскивать стрелки:

modalController.directive('imageonload', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.bind('load', function() { 

       var img = document.getElementById("fullImage"); 

       var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 
       var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); 

       var imageWidth = img.width; 
       var imageHeight = img.height; 

       var aspectRatio = imageWidth/imageHeight; 

       if (w < imageWidth && h < imageHeight){ 
        // scale image down 
        var widthDiff = imageWidth - w; 
        var heightDiff = imageHeight - h; 

        if(widthDiff <= heightDiff){ 
        imageWidth = w; 
        imageHeight = w/aspectRatio; 
        } 
        else{ 
        imageHeight = h; 
        imageWidth = h * aspectRatio; 
        } 
       } 
       else if (w < imageWidth && h > imageHeight) { 
        // fill image vertically 
        imageHeight = h; 
        imageWidth = h * aspectRatio; 
       } 
       else if (w > imageWidth && h < imageHeight) { 
        // fill image horizontally 
        imageWidth = w; 
        imageHeight = w/aspectRatio; 
       } 
       else { 
        // fill image in both directions 
        var widthDiff = w - imageWidth; 
        var heightDiff = h - imageHeight; 

        if(widthDiff >= heightDiff){ 
        imageWidth = w; 
        imageHeight = w/aspectRatio; 
        } 
        else{ 
        imageHeight = h; 
        imageWidth = h * aspectRatio; 
        } 
       } 

       img.style.width = imageWidth + "px"; 
       img.style.height = imageHeight + "px"; 
       img.style.maxWidth = "none"; 

       // add scroll left to parent container 
       var container = img.parentNode; 
       var scrollLeft = (imageWidth - w)/2; 
       container.scrollLeft = scrollLeft; 

      }); 

      element.bind('touchmove', function(){ 

       var arrows = document.getElementById("drag-arrows"); 
       arrows.style.display = "none"; 

      }); 
     } 
    }; 
}); 

Любые предложения о том, как создать этот выцветанию эффект особенно правильный угол, если это возможно?

Answer 1

Если вы используете JQuery, попробуйте .fadeOut() вместо arrows.style.display = "none";

arrows.fadeOut(); 

Если вы не используете JQuery, то вы можете сделать это с классами CSS:

arrows.className = "drag-arrows hidden"; 

И в CSS:

.drag-arrows { 
    opacity: 1; 
    -webkit-transition: opacity 0.5s; /* For Safari 3.1 to 6.0 */ 
    transition: opacity 0.5s; 
} 

.hidden { 
    opacity: 0; 
} 

Обратите внимание, что решение CSS просто изменит opacity стрелок, а не фактическое display, так как display не может быть анимировано. Если вы все еще хотите поставить свойство отображения ваших стрел в none, вам нужно будет добавить eventListener следующим образом:

arrows.className = "drag-arrows hidden"; 
arrows.addEventListener("transitionend", function(){ 
    arrows.style.display = "none"; 
    arrows.removeEventListener("transitionend"); 
}, false); 

Если после этого вы хотите, чтобы показать ваши стрелы позже, вы можете использовать:

arrows.className = "drag-arrows"; 
arrows.addEventListener("transitionend", function(){ 
    arrows.style.display = "block"; // Or whichever display you had before 
    arrows.removeEventListener("transitionend"); 
}, false); 

Answer 2

Итак, я создал это plnkr, извлеченное из него из Angular Docs. Он также показывает, как собрать все это вместе, а не просто выдержку, хотя Угловая тоже дает это.

http://docs.angularjs.org/api/ngAnimate

http://docs.angularjs.org/api/ng/directive/ngShow#animations

Так сво CSS3, что делает всю работу:

.animate-show { 
    line-height: 20px; 
    opacity: 1; 
    padding: 10px; 
    border: 1px solid black; 
    background: white; 
} 

.animate-show.ng-hide-add.ng-hide-add-active, 
.animate-show.ng-hide-remove.ng-hide-remove-active { 
    -webkit-transition: all linear 0.5s; 
    transition: all linear 0.5s; 
} 

.animate-show.ng-hide { 
    line-height: 0; 
    opacity: 0; 
    padding: 0 10px; 
} 

Тогда он просто используя директиву:

<p ng-show="vm.showText" class="animate-show">Sometext</p> 

и ЯШ:

vm.showText = false; 

$timeout(function() { 
    vm.showText = true; 
}, 2000); 

$timeout просто представляет собой функцию асинхронного ввода. как звонок $http.

Очевидно, что неважно, сделаете ли вы это с помощью контроллера или директивы, они оба достигнут того же результата.

Крутой отзыв, если вы продлеваете время анимации и просматриваете элементы в консоли Chrome или Firebug, вы можете просматривать классы css по мере их изменения. Это позволит вам внимательно посмотреть, что именно происходит, и как изменить свой CSS, чтобы дать правильный результат.