动画不起作用。我无法判断我的错误。
这是代码。
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-messages.js"></script>
<script src="js.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<div ng-hide="hidden == true" ng-animate="'slide'">
<h1>Come and get it!</h1>
</div>
<div ng-hide="hidden == false" ng-animate="'slide'">
<h1>Fine.</h1>
</div>
<div>
<button ng-click="hidden=true">I don't want it</button>
<button ng-click="hidden=false">I want it</button>
</div>
</div>
</body>
</html>
CSS
.slide-container {
height: 100px;
position: relative;
}
.slide-container > * {
display:block;
width:100%;
top:0;
left:0;
right:0;
bottom:0;
padding:10px;
}
.slide-hide, .slide-show {
-webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: absolute;
}
.slide-hide {
background: red;
display: none;
}
.slide-hide.slide-hide-active {
background: red;
display: none;
}
.slide-show {
background: red;
position: relative;
left: 100px;
}
.slide-show.slide-show-active {
background: red;
position: relative;
left: 0px;
}
JS
angular.module('myApp', [])
.controller('AppCtrl', function ($scope) {
$scope.hidden = false;
});
我从http://jsfiddle.net/elthrasher/Uz2Dk/获得了此代码。在小提琴中,它工作得很好,但是一旦我在编辑器中移动代码,我就无法工作了!我只想获得一个功能,当单击一个按钮时,内容会随动画一起更改。例如,左飞动画。