javascript/angularjs-淡出 我有一个图片，中间有一个图标，表示用户滚动的能力。当用户滚动时，我想淡出图标。现在我可以隐藏图片，但想要淡入淡出效果

以下是我的看法：

<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>

{{optionName}}

下面是我的指令，它侦听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";

            });
        }
    };
});

modalController.directive（'imageonload'，function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
元素绑定（'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=图像高度；
var aspectRatio=图像宽度/图像高度；
if（wimageWidth&&h=高度差异）{
图像宽度=w；
图像高度=宽/宽；
}
否则{
成像高度=h；
图像宽度=h*纵横比；
}
}
img.style.width=imageWidth+“px”；
img.style.height=imageHeight+“px”；
img.style.maxWidth=“无”；
//将向左滚动添加到父容器
var container=img.parentNode；
var scrollLeft=（imageWidth-w）/2；
container.scrollLeft=scrollLeft；
});
元素绑定（'touchmove'，function（）{
var arrows=document.getElementById（“拖动箭头”）；
arrows.style.display=“无”；
});
}
};
});

---

关于如何创建这种淡入淡出效果的任何建议，特别是正确的angularjs方式，如果可能的话？

如果您使用的是jQuery，请尝试代替

arrows.style.display=“none”

如果不使用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解决方案只会更改箭头的

不透明度

，而不是实际的

显示

属性，因为

显示

无法设置动画。如果仍要将箭头的显示属性设置为

无

，则需要添加一个

事件侦听器

，如下所示：

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

---

如果您使用的是jQuery，请尝试替代

arrows.style.display=“none”

如果不使用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解决方案只会更改箭头的

不透明度

，而不是实际的

显示

属性，因为

显示

无法设置动画。如果仍要将箭头的显示属性设置为

无

，则需要添加一个

事件侦听器

，如下所示：

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

我从Angular文档中提取了大部分内容，并展示了如何将这些内容放在一起，而不仅仅是一个摘录，尽管Angular也给出了这一点

因此，所有工作都是由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>

$timeout

只是表示一些异步函数。比如

$http

调用

显然，无论您是从控制器还是从指令执行此操作，它们都会获得相同的结果

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

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

因此，所有工作都是由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>

$timeout

只是表示一些异步函数。比如

$http

调用

显然，无论您是从控制器还是从指令执行此操作，它们都会获得相同的结果

---

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

谢谢你的回复。这为我澄清了很多。但只想澄清一下y、 如何从指令中访问vm.showText scope变量？它位于指令作用域上，或者您可以在元素上添加另一个属性并读取该变量。是否需要更新的示例？当然，我今天下午晚些时候会讨论它。@user3562751感谢您的响应。这为我澄清了很多。但为了澄清一下，我将如何处理它访问虚拟机。