AngularJS变换CSS翻译成指令

我有一个div这种风格AngularJS变换CSS翻译成指令

#main-content{ 
    height: inherit; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    transform: translateY(50px); 
    transition-duration: 0.5s; 
} 

#main-content:hover{ 
    transform: translateY(30px); 
    opacity: 0; 
}

当我的鼠标悬停它上升和消失的股利，现在我想删除悬停在执行这个动画指令。如何获取div元素以及如何在其上添加此动画？

编辑：这是我想补充的动画

.directive('ngMouseWheelUp', function ($window, $location, $timeout) { 
     return function (scope, element, attrs) { 
      angular.element($window).bind("DOMMouseScroll mousewheel onmousewheel onscroll", function (event) { 
       if (!scope.elementIsScrolled) { 
        var event = window.event || event; // old IE support 
        var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); 
        if (delta > 0) { 
         console.log("wheel up"); 


         // This is where I would like to add the animation 


         event.returnValue = false; 
         if (event.preventDefault) { 
          event.preventDefault(); 
         } 
         scope.$apply(); 
         scope.elementIsScrolled = true; 
         $timeout(function() { 
          scope.elementIsScrolled = false; 
         }, 800); 
        } 
       } 
      }); 
     }; 
    })

来源

2017-08-02 Vodet

你为什么不变换指令那成一个类，然后添加这个类到你的元素而不是一个指令？所以而不是＃主要内容它将隐藏在悬停，然后添加hide-on-hover在类atribute – Ahmad

我想这样做的指令，因为我使用指令检测时，用户鼠标滚轮滚动和我想在用户滚动时做这个动画 – Vodet

好，那么你想在指令中执行这个动画吗？在哪个活动？ – Ahmad

CSS

#main-content.hovered{ 
    transform: translateY(30px); 
    opacity: 0; 
}

// This is where I would like to add the animation 
angular.element(element).addClass('hovered'); 
// turns transition-duration:0.5s into 500 miliseconds to use for $timeout 
let timeoutDuration = parseFloat(angular.element(element).css('transition-duration')) * 1000; 
$timeout(function() { 
    angular.element(element).removeClass('hovered'); 
}, timeoutDuration);

来源

2017-08-02 23:15:00 chiliNUT

AngularJS变换CSS翻译成指令

回答

相关问题