CSS
.hover-div{
position:absolute;
margin-top:-150px;
visibility:hidden;
transition:all 0.5s linear 0s;
}
.team_hover:hover + .hover-div {
margin-top:0px;
visibility:visible;
}
.hover-div:hover {
margin-top:0px;
visibility:visible;
}
.slide-hidden{
visibility:hidden !important;
transition:all 0.5s linear 0s;
}
Here when mouse over the yellow box. another slide will comes from top. That slided div contain team names. I need to slide back the div when click on one team name. Now its just hide only(ie no slide animation). I need slide effects.
Plunker
Instead of relying on :hover, you should add/remove a class on ng-mouseover and ng-mouseleave. I have made a quick edit to your plunker here: http://plnkr.co/edit/niHQfuDxxV1bv1gcPL73?p=preview
Related
I want to switch between 2 elements in one place. When switching, current element will fade out, and after that, the next element will fade in to replace the old one. So I set a delay time for the .ng-hide-remove to get this effect.
But before the next element shows up, it occupies space in the DOM and breaks the layout of the page.
How can I fix this?
Here is the fiddle link: fiddle
css:
div {
transition: all linear 0.5s;
}
#div1 {
background-color: lightblue;
}
#div2 {
background-color: lightgreen;
}
.ng-hide-remove {
transition-delay: 0.5s;
}
.ng-hide {
opacity: 0;
}
HTML:
<h1>Switch the DIVs: <input type="checkbox" ng-model="myCheck"></h1>
<div id="div1" ng-hide="myCheck">Div 1</div>
<div id="div2" ng-hide="!myCheck">Div 2</div>
You don't need the transition on your div. See the forked fiddle here with the transition commented out.
JSFiddle
div {
// transition: all linear 0.5s;
}
I have simple css animation effect:
.sample-show-hide {
-webkit-transition:all linear 1.5s;
transition:all linear 1.5s;
}
.sample-show-hide.ng-hide {
opacity: 0;
}
.sample-show-hide.ng-show {
opacity: 1;
}
I tried to animate md-button with it. Animation is fine for showing, but on hidding there is no effect. When I changed to simple <button> tag, animation works for both show/hide. Is there way to fix it?
ng-hide have property transition: none, use the following css
.sample-show-hide {
-webkit-transition:all linear 1.5s !important;
transition:all linear 1.5s !important;
}
check on jsfiddle
I have a calendar represented with a table. The content of each day may be too much to display so the height is fixed and the overflow hidden. However when the user hovers over the row I have the entire row expand. This is working perfectly. What I need to ease the transition of the divs in the row from height:60px to height:auto, perhaps slow it to about 500ms.
I'm using AngularJS 1.2, I have ngAnimate loaded as well as animate.css (used elsewhere in the app).
Each day in the calendar is a div within a td tag.
div.cal_container
{
height:60px;
overflow:hidden;
}
And when I hover over the row this is what I use to expand the whole row:
table.cal tr:hover > td > div
{
height:auto;
}
How do I animate the height transition?
The problem seems to be that transitions don't like height:auto. I found this solution/workaround and it's giving me 95% of what I wanted:
Add max height to the div:
div.cal_container
{
height:60px;
overflow:hidden;
max-height: 60px;
}
Add the transition to the max-height in the row selector CSS:
table.cal tr:hover > td > div
{
max-height: 1000px;
transition: max-height 0.75s ease-in;
height:auto;
}
The last bit I'd like to get is to ease the transition back to height:60px when they stop hovering but this is less important.
I have a wrap, like a console, and inside it i have another div for the background image and the ng-view of angular like this:
< id="wrap">
< class="introPage">
< ng-view class='mainView'> </div>
<end of class>
</endofid>
Im using animate.js library, which gives me this smooth bounceInLeft which occurs in one second:
.mainView.ng-enter {
animation: bounceInLeft 1s;
-webkit-animation: bounceInLeft 1s;
}
.mainView.ng-leave {
animation: bounceOutRight 1s;
-webkit-animation: bounceOutRight 1s;
}
I have a slight problem with the transition itself, the current page bounces off and it seems the second one is bouncing in under it, and once the previous page goes off entirely, the current one just pops up and it's really not the behaviour i expected, what is the cause of this?
For those who don't understand what i mean, it's like when i have 2 divs in a container with a width of 1000px, the left div is width 500px and when the right div is 501px it goes under the left div...
Here is the example page:
http://single.org.il/#/intro
when you click a gender and press go, there is a bounceoutright, and the bounceinleft occurs at the same time, please just see when you remove the overflow-hidden in the #wrap id, the bounceinleft is just beneath the the current page...
How can I enable different transitions with AngularJS. Lets Say, I have a sidebar in my web application. I the user clicks a button X, the sidebar should disappear very fast, if the user clicks another button, the sidebar should disappear slow.
I think, this would work by setting a transition option value after one of that clicks and then changing the visibility state of the sidebar (watched by the transition directive).
But that seems a bit like bad style for me. Is there a common way to do this?
I would do something like this. Set a default transition for the sidebar, and then apply a class with a different transition speed.
Here is a jsFiddle of what I mean:
http://jsfiddle.net/rd13/eTTZj/149/
HTML:
<div ng-controller="myCtrl">
<div class="sidebar" ng-class="{'slide-out':boolChangeClass}">
Sidebar
</div>
<button ng-click="click()">Toggle Sidebar</button>
</div>
Angular:
function myCtrl($scope) {
$scope.click = function() {
$scope.boolChangeClass = !$scope.boolChangeClass;
$scope.$apply();
}
}
CSS:
.sidebar {
-moz-transition: left .1s;
-webkit-transition: left .1s;
-o-transition: left .1s;
transition: left .1s;
width: 100px;
background-color: blue;
position: absolute;
top: 0px;
bottom: 0px;
left: -100px;
}
.slide-out {
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
left: 0px;
}