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翻譯成指令

回答

相關問題