I'm new to Angular and I'm trying not to depend on jQuery for this fadeIn animation I want.
I've tried ng-animate and .fade-enter + .fade-enter.fade-enter-active, but I'm getting nowhere.
my footer CSS looks like this:
footer {
opacity: 0.3;
text-align: center;
}
And I'm trying to animate it such that opacity goes to 1 in 2 seconds.
This is the version of Angular I am running:
<script data-require="[email protected]" data-semver="1.1.5" src=".1.5/angular.min.js"></script>
How would I do this animation with Angular and CSS and without jQuery?
I'm new to Angular and I'm trying not to depend on jQuery for this fadeIn animation I want.
I've tried ng-animate and .fade-enter + .fade-enter.fade-enter-active, but I'm getting nowhere.
my footer CSS looks like this:
footer {
opacity: 0.3;
text-align: center;
}
And I'm trying to animate it such that opacity goes to 1 in 2 seconds.
This is the version of Angular I am running:
<script data-require="[email protected]" data-semver="1.1.5" src="http://code.angularjs/1.1.5/angular.min.js"></script>
How would I do this animation with Angular and CSS and without jQuery?
Share Improve this question asked Aug 24, 2013 at 19:30 platypusplatypus 231 silver badge3 bronze badges 6- You can create AngularJS demos of code at plnkr.co, which will help understand what you've tried. – Jared Farrish Commented Aug 24, 2013 at 19:33
-
Also, you might check out: stackoverflow./a/12489271/451969 Which uses pure CSS, with jQuery toggling a class. Note: Only works in Webkit. Technically, what you need to do is modify the
opacityfor an element from1to0and vice versa, so some Javascript to start at one value and increment/decrement over a period of time (setTimeout()) to the other value is what you need. – Jared Farrish Commented Aug 24, 2013 at 19:41 - Hey Jared, Thanks for the link. I could also use jQuery's .animate(), but I want to use CSS and Angular exclusively. Here's the plunker: plnkr.co/edit/u3ENd655gl1JwDM06Aso – platypus Commented Aug 24, 2013 at 19:46
- Have you tried the official docs? nganimate/angularjs/ng-repeat/appear – Jared Farrish Commented Aug 24, 2013 at 19:49
- Yeah, but I'm just not getting it :( I also can't get it to trigger on a click. In my head, it makes sense for ng-click="replaceThis()" ng-animate="{{replaceThisVariable}}", but it doesn't work at all for me. I'm definitely doing something wrong, but I don't know what it is. – platypus Commented Aug 24, 2013 at 19:57
2 Answers
Reset to default 3Here's an example of how to do a fade in/out animation in Angular 1.1.5:
HTML
<body ng-init="visible = true">
<button ng-click="visible = !visible">Show/Hide</button>
<p ng-show="visible" ng-animate="'fade'">Hello {{name}}!</p>
</body>
CSS
.fade-hide, .fade-show {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.fade-hide {
opacity:1;
}
.fade-hide.fade-hide-active {
opacity:0;
}
.fade-show {
opacity:0;
}
.fade-show.fade-show-active {
opacity:1;
}
Plunker here.
This blog post has good information on animations in Angular 1.1.5. And I suggest taking a look at the new animation system released in Angular 1.2 RC1.
All you need about animation can be found on their documentation
HTML
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
</label>
<div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">Visible...</div>
</div>
CSS
.sample-show-hide {
padding:10px;
border:1px solid black;
background:white;
}
.sample-show-hide {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
opacity:0;
}
source: https://docs.angularjs/guide/animations
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745649777a4638191.html
评论列表（0条）