我想使用 Angular 函数来激活 Css 动画。我一直在寻找方法来做到这一点,但我真的很困惑如何在我的案例中做到这一点。当单击按钮“B1”或“B2”之一时,我希望 div“slide1”向右水平滑动。
这是我的 Angular 函数:
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);
}
}
对于如何使用我的 Angular 函数让 Slide1 div 在点击时移动有什么帮助吗?
最佳答案
一个简单的方法是动态地将类添加到 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
为 true
时,slide1
类将添加到 div
。
注意:不需要在 Controller 中定义doSlide
,Angular 会自动将其添加到作用域中。
关于javascript - 如何使用 Angular 在单击按钮时激活 CSS 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41785242/