为什么这个angularjs动画不起作用?

时间:2017-11-08 13:30:24

标签: javascript html css angularjs

动画不起作用。我无法判断我的错误。

这是代码。

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/获得了此代码。在小提琴中,它工作得很好,但是一旦我在编辑器中移动代码,我就无法工作了!我只想获得一个功能,当单击一个按钮时,内容会随动画一起更改。例如,左飞动画。

0 个答案:

没有答案