Question

我有一个这种风格的div

#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上时它会上升并消失，现在我想删除悬停并在指令中执行此动画。如何获取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);
                    }
                }
            });
        };
    })

Answer 1

<强> CSS

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

<强> JS

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

AngularJS将css转换转换为指令

1 个答案: