如何使用Angular在点击按钮时激活CSS动画？

我想使用Angular函数来激活一个Css动画。我已经寻找方法来做到这一点，但我真的很困惑如何在我的情况下做到这一点。当按钮“B1”或“B2”中的一个被点击时，我希望div“slide1”水平向右滑动。如何使用Angular在点击按钮时激活CSS动画？

这是我的角功能：

directive('click2',() => { 
    return{ 
    restrict: 'A', 
     link: (scope) => { 
     scope.clicked =() => { 

     } 
     } 
    } 
})

我的幻灯片DIV + CSS是：

.slide1 { 
    bottom: -500px; 
    width: 30%; 
    //min-width: 275px; 
    height: 50%; 
    min-height: 390px; 
    box-sizing: border-box; 
    position: relative; 
    content: ''; 
    background: #a2e0f7; 
    animation:nudge 5s linear alternate; 
} 

@keyframes nudge { 
    0%{ 
    right: 500px; 
    }; 
    100% { 
    transform: translate(500px); 
    } 
    50% { 

    transform: translate(0,0); 
    } 
}

与我如何能得到滑件的div上点击移动与我的角度函数任何帮助吗？

来源

2017-01-21 feners

一个简单的方法是将这个类动态添加到div。

而且一个办法做到这一点会是这样的：

<div ng-controller="MyCtrl"> 
    <button ng-click="doSlide = !doSlide">A</button> 
    <button ng-click="doSlide = !doSlide">B</button> 
    <div ng-class="{'slide1': doSlide}">Click a button to move me</div> 
</div>

点击任一按钮将切换doSlide值。当doSlide是trueslide1类被添加到div。

注意：在控制器中没有必要定义doSlide，Angular会自动将其添加到范围中。

来源

2017-01-22 00:34:19

如何使用Angular在点击按钮时激活CSS动画？

回答

相关问题