javascript/angularjs - fade out

javascript/angularjs - fade out

本文关键字：fade out angularjs javascript      更新时间：2023-09-26

我有一张图片，中间有一个图标，表示可以为用户滚动。当用户滚动时，我想将图标淡出。现在我可以隐藏图片，但想要渐变效果。

这是我的观点：

<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";
            });
        }
    };
});

关于如何创建这种渐变效果，特别是正确的angularjs方式，如果可能的话，有什么建议吗？

如果使用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);

所以我创建了这个plnkr，其中大部分是从Angular Docs中提取的。它还展示了如何将所有内容放在一起，而不仅仅是摘录，尽管Angular也给出了这一点。

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>

和js:

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

$timeout只是表示某种异步功能。如CCD_ 9呼叫。

显然，无论你是从控制器还是指令中这样做都无关紧要，它们都会获得相同的结果。

一个很酷的提示是，如果你延长动画的时间，并在chrome或firebug控制台中查看元素，你可以观察css类的变化。这将让您仔细了解到底发生了什么，以及如何修改css以获得正确的结果。

相关文章：