Very simple question: In AngularJS 1.2.x, is it possible (and how) to get ngAnimate to fire when removing an item from scope?
Here's an example Plunker:
http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview
Code:
<body ng-controller="MainCtrl">
<div ng-repeat="img in imgs" class="my-repeat-animation">
<img ng-src="{{img}}" />
<button class="btn btn-primary" ng-click="remove(img)">DELETE</button>
</div>
</body>
Script:
app.controller('MainCtrl', function($scope) {
$scope.imgs = ['http://cache.mrporter.com/images/products/362812/362812_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/362807/362807_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/364762/364762_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/357020/357020_mrp_in_l.jpg']
$scope.remove = function(image){
var index = $scope.imgs.indexOf(image);
$scope.imgs.splice(index,1);
}
});
As you can see, clicking the "DELETE" button runs splice() on $scope.imgs. I'd like to animate this, rather than have it simply disappear. I'm using the transitions just copy-and-pasted from this Year Of Moo article which works just fine when filtering the scope, but evidently not when removing from scope.
Make sure app includes ngAnimate as a dependency, the file angular-animate.js is loaded after angular.js, and add this example animation to your CSS:
/* Add animation */
.my-repeat-animation.ng-enter.ng-enter-active,
.my-repeat-animation.ng-leave {
opacity: 1;
-webkit-transition: opacity 300ms linear;
-moz-transition: opacity 300ms linear;
transition: opacity 300ms linear;
}
/* Remove animation */
.my-repeat-animation.ng-leave.ng-leave-active,
.my-repeat-animation.ng-enter {
opacity: 0;
-webkit-transition: opacity 300ms linear;
-moz-transition: opacity 300ms linear;
transition: opacity 300ms linear;
}
This will animate both additions to, and removals from imgs.
Related
I'm a beginner in javascript and I stumbled upon this problem.
This is a part of markup from site i'm working on:
<div class="row">
<div class="col-lg-12">
<div id="target">
<div id="bgDiv">
<img src ="someurl">
</div>
</div>
</div>
</div>
It's a part of a simple bootstrap layout. What i want to do is to animate the #target div so that the image fills the whole browser screen on mouseover , preferably using pure javascript. If I do it with this function:
function(){
var target = document.getElementById('target');
function FullScreen {
target.style.cssText ='position:absolute;top:0;bottom:0;left:0;right:0;z-index:999'
document.body.appendChild(target);};
target.addEventListener('mouseover', FullScreen)};
It does the job of displaying the image covering whole browser window, but I'm cluless how to make the "fill" animation. I tried experimenting with transitions, but i think since i change the 'position' property and append the element to body it does not work.
I would be grateful for any help or suggestions.
As Portal_Zii already mentioned, you can easy create animations without javascript using CSS3 properties only like:
transition
animation
With this knowledge its quiet simple to implement an hybrid solution with CSS3 transition property, the onmouseenter and onmouseleave event.
Try to run the Code and re-size the window.
var myDiv = document.getElementById("myDiv");
var myImg = document.getElementById("myImg");
myDiv.onmouseleave = shrinkImage;
myDiv.onmouseenter = growImage;
function shrinkImage() {
myImg.style.width = 50 + "px";
myImg.style.height = 50 + "px";
}
function growImage() {
myImg.style.width = window.innerWidth + "px";
myImg.style.height = window.innerHeight + "px";
}
img {
width: 50px;
height: 50px;
transition: all 0.7s;
}
<div id="myDiv">
<img id="myImg" src="data:image/gif;base64,R0lGODlhMAAwAOMAANTS1Ozq7Nze3PT29Nza3PTy9OTm5Pz+/NTW1Ozu7OTi5Pz6/P///wAAAAAAAAAAACH5BAEAAAwALAAAAAAwADAAAAT+kMlJq72YnUDMymAoMgUCAMWorqQJBGy8LMc1EKcSr4sgwJYbAEHYqQInxMBywA1rxlDCJfhUBCaENZppngAG6MTwXXJB02yKkhgCEmfQJknYkr6GOGgg+AbEA1kCegdiFAcFSQhrGlSGOyUvA48MCklVEwgmBGZRfUMCjBNCJ3kSlkOdRmRfCH+HAVlKEmSaojsLsUkAoWIHqLwfbUNwZwcJTkkJW4FZf5FghHxZQwqdbVkDQgjFhGmKCTULlrYHAwbhehQFWK0eDHwAnHHmlBq5Liec5gWTZws4EAhIMIBGhWlu5qmb8gVUgGViFhhwsUhdCzcNiShYJgFRH0z+FiUSoNjwxI8CNAxanIDIgAJq1EDdWtnRXIJ2u0rZo8mygAEsznaGKEQ0BqIABt7VLDTipgAFjI497KfyAlMJNxUoDIHkBCNgGQk8DfBQW9WuKEag7fYpJkY3mggwQjvzQlduE9DmfNtKQY0DE72OCPyGpc2kPrCM1JTP1Bxiat10s7pA24AECZAaCGAFsIvJGe6CHlG04926Fgh341egtevX/fr507BWbZZuumDCLVlRQ63CImpLyFey1W4Bf0/bhkxL026+cIsB/oK6gi7gDBZkRoo0wWZ04B+mo019OV56rHpz/Uzo5QlVGRgKpEG0vv379dklgY+BlDwBYgUw6INYACZm4IAAXmIHCLkV5+CDGQ1RHROE6UYSdLtQNJ4K2r3E2IcghhiiAQUIJUEEADs="
/>
</div>
You can describe all of the target's element properties in the class 'over' of css and describe an animation through transition on properties of position of your element. Then when you this class 'over' to element with id=target.
function FullScreen {
target.style.classList.add('over')};
I think all you need to do is add transition styles in your css:
#target {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
Additionally you could accomplish this in just using css no?
#target {
DEFAULT:STYLES;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#target:hover {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
padding:0;
z-index:999;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
I'm trying to fade 2 different images on the same page with a different delay. The first image appears and then the second one appears.
Here's my fiddle :http://jsfiddle.net/jarod51/4RvWY/3/
the css:
.panel img {
opacity:0;
-moz-transition: opacity 3000ms ease-in-out;
-webkit-transition: opacity 3000ms ease-in-out;
transition: opacity 3000ms ease-in-out;
}
.shown img{
opacity: 1;
}
.img2{
opacity:0;
-moz-transition: opacity 10000ms ease-in-out;
-webkit-transition: opacity 10000ms ease-in-out;
transition: opacity 10000ms ease-in-out;
}
.shown1 img2{
opacity: 1;
}
the html :
<div id="home" class="panel">
<h2>Home</h2>
<img src="http://lorempixum.com/200/200/people/3"/>
<img class="img2" src="http://lorempixum.com/200/200/people/1"/>
</div>
my jquery attempt:
$('#wrap').find('.shown').removeClass('shown');
$target.addClass('shown');
$('#wrap').find('.shown1').removeClass('shown1');
$target.addClass('shown1');
There's a couple of things you may fix to get it working:
1) You're missing a dot (.) before the img2 in the .shown1 img2 rule. You're referring to a class and not to an HTML tag. That must be like this:
.shown1 .img2{
opacity: 1;
}
2) If you want to apply a delay to the CSS transition, you can specify it after the duration in the shorthand transition property, or in the transition-delay property. For example, for a 2s delay you can use:
.panel .img2{
opacity:0;
-moz-transition: opacity 10000ms 2s ease-in-out;
-webkit-transition: opacity 10000ms 2s ease-in-out;
transition: opacity 10000ms 2s ease-in-out;
}
See it in action here: http://jsfiddle.net/FL3RK/2/
Anyway, IMHO it would be nicer if you use the same duration (3000ms or 3s) for both transitions.
EDIT: If you don't want to wait for the animation to be completed to start it over again, put the transition property in your .shown1 .img2 rule like this:
.shown1 .img2{
opacity: 1;
-moz-transition: opacity 3000ms 2s ease-in-out;
-webkit-transition: opacity 3000ms 2s ease-in-out;
transition: opacity 3000ms 2s ease-in-out;
}
Working fiddle: http://jsfiddle.net/FL3RK/3/
var finished = 0;
var callback = function (){
// Do whatever you want.
finished++;
}
$(".div"+finished).animate(params, duration, null, callback);
html
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/1"/>
<img src="http://lorempixum.com/200/200/people/2"/>
<img src="http://lorempixum.com/200/200/people/4"/>
css
img {display:none;}
script
$("img").each(function(i) {
$(this).fadeIn(2000*(i+1));
});
see the fiddle http://jsfiddle.net/vishnurajv/px7U5/
I ran into a case where only backdrop is being display and modal is only displayed after the backdrop is removed. This is the first time I ever ran into this issue after a couple years of using bootstrap and I'm not able to figure out why. When debugging, the callback is never triggered on the first pass. It's only triggered after I click on the backdrop.
Anyone else ran into this issue before? Is it something to do with CSS conflict potentially? Removing jquery-mobile-1.4.2.css seems to help, but I kinda need both of them to work together. The version of bootstrap I'm using is 2.3.2.
this.backdrop(function() {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
that.$element.appendTo(document.body) //don't move modals dom position
}
that.$element.show()
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in').attr('aria-hidden', false)
that.enforceFocus()
transition ?
that.$element.one($.support.transition.end, function() {
that.$element.focus().trigger('shown')
}) :
that.$element.focus().trigger('shown')
})
}
jQuery Mobile and Twitter Bootstrap use the class "fade" and "in" which is causing the conflict. Here is how I got around it.
Create an override style sheet with the following classes (these are copied from the bootstrap.css file and modified so any reference to "fade" or "in" becomes "bootstrap-fade" and "bootstrap-in" respectively:
.modal-backdrop.bootstrap-fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.bootstrap-fade.bootstrap-in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal.bootstrap-fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
}
.modal.bootstrap-fade.bootstrap-in {
top: 10%;
}
.bootstrap-fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.bootstrap-fade.bootstrap-in {
opacity: 1;
}
#media (max-width: 767px) {
.modal.bootstrap-fade {
top: -100px;
}
.modal.bootstrap-fade.bootstrap-in {
top: 20px;
}
}
Next you need to edit the bootstrap.js file. You can either copy the entire modal section, (line 61 - 310), or you can edit it directly in the file with find and replace. Replace all references to "fade" and "in" with your new classes "bootstrap-fade" and "bootstrap-in". There are 5 instances of "fade" and 4 instances of "in" in the modal section of the js file.
Once you have done that, just create your modal normally and use the class "bootstrap-fade" instead of "fade".
<div id="myModal" class="modal hide bootstrap-fade" tabindex="-1" role="dialog" aria-labelledby=myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h2 id="assignModalLabel">Modal</h2>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
Hope that helps!
<script type="text/javascript">
$(document).ready(function(){
$('#logo').mouseenter(function() {
$('#logo').fadeTo("fast",0.3);
});
$('#logo').mouseleave(function() {
$('#logo').fadeTo("fast",1)
});
});
</script>
I made this to change the opacity of an image while hovering over it with the cursor, but this doesn't happen. :(
You don't need jQuery for that, you can use CSS:
Example HTML - you need it to have the ID logo.
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />
CSS
#logo {
opacity: 1;
filter:alpha(opacity=100);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
#logo:hover {
opacity: 0.3;
filter:alpha(opacity=30);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
http://jsfiddle.net/pFEdL/2/
What does you HTML look like for your image? Is it embedded in other divs?
SO: Jquery mouseenter() vs mouseover()
As gilly3 states in the question above, "Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter".
Is it possible to fade the content of element that ng-bind-html fills in. Already tried to use the id.ng-enter or id.ng-leave without success.
ng-if will add/remove DOM element dynamically according to the boolean value of expression. ng-animation could attach to the element which has ng-if directive that change the DOM.
This element will be added when htmlContent is being filled in.
<body ng-controller="myCtrl">
<button ng-click="fillinContent()">fillin</button>
<div ng-if="htmlContent" class="toggle" ng-bind-html="htmlContent"></div>
</body>
Decalre the CSS3 transition
<style>
.toggle{
-webkit-transition: linear 1s;
-moz-transition: linear 1s;
-ms-transition: linear 1s;
-o-transition: linear 1s;
transition: linear 1s;
}
.toggle.ng-enter{
opacity: 0;
}
.toggle.ng-enter-active{
opacity: 1;
}
.toggle.ng-leave{
opacity: 1;
}
.toggle.ng-leave-active{
opacity: 0;
}
</style>
Controller
angular.module("myApp",['ngSanitize','ngAnimate'])
.controller("myCtrl",function($scope){
$scope.fillinContent = function(){
$scope.htmlContent = "content content";
}
});
The html content will fade in when you click the fill in button: