Is it possible to turn off the animation for the modal directive in angular-ui? http://angular-ui.github.io/bootstrap/
Can't find any in the options. Should I modify the source? Or is there any best practice when you want to customize?
Currently, the bootstrap classes are embedded in the directive and need to be overridden. If you want to prevent that vertical 'drift' into position of the modal window, place the following 2 classes in your css :
.modal.fade {
opacity: 1;
}
.modal.fade .modal-dialog, .modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
What you would be accomplishing here is the negation of the existing translations. Not ideal, however will do the trick.
animation (Type: boolean, Default: true) - Set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed.
var modalInstance = $uibModal.open({
animation: false
An easy way to turn off the animation is to add !important styles to the modal.
For all Modals
You can do that globally for all the modals with this CSS class (put it anywhere in your css):
.modal {
top: 25% !important;
opacity: 1 !important;
}
It will eliminate the "slide from top" animation and also the opacity animation. Personally I prefer to only eliminate the first and use only top: 25% !important;
You can also eliminate the backdrop animation globally using this class (put it anywhere in your css):
.modal-backdrop {
opacity: 0.8 !important;
}
For a Specific modal
You can eliminate the animations of a specific modal using the windowClass param.
.no-animation-modal {
top: 25% !important;
opacity: 1 !important;
}
Using windowClass:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
windowClass: 'no-animation-modal'
});
Don't have a full answer, but I'm having a similar issue and thought I'd chime in. I know that this used to be possible in angular-ui/bootstrap 0.5. There might be breaking changes in 0.6, and I'm trying to find an answer, but the documentation is pretty lacking.
Here is the example given in 0.5. Notice you can set options like backdropFade but I can't find the equivalent in 0.6. Might have something to do with removing $dialogProvider.
The below is working well for me, whatever the animation: false or animation: true:
<style>
.modal.fade {
opacity: 1;
}
.modal.fade .modal-dialog, .modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-backdrop {
opacity: 0.8 !important;
}
</style>
Related
The two blocks behave differently when applying tailwind's "rotate(**deg)" and vanilla css "transform: rotate(**deg)". Please just hover the blue blocks to reproduce.
https://play.tailwindcss.com/Rgf2GJ6mim
Since I sometimes use css in #layer utilities to write nested styles, so could someone please help me understand this? Big Thanks!!
Despite it looks like both examples do the same thing it's not quite true. Let's find out the difference. All classes in your example are same but the last one
hover:[transform:rotate(1020deg)] generates this
.hover\:\[transform\:rotate\(1020deg\)\]:hover {
transform: rotate(1020deg);
}
while hover:rotate-[1020deg] this
.hover\:rotate-\[1020deg\]:hover {
--tw-rotate: 1020deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Or if you fill in Tailwind variables with its values it all comes to comparison between
.hover\:\[transform\:rotate\(1020deg\)\]:hover {
transform: rotate(1020deg);
}
// and
.hover\:rotate-\[1020deg\]:hover {
transform: translate(0, 0) rotate(1020deg) skewX(0) skewY(0) scaleX(1) scaleY(1);
}
We're forgot about one VERY important class - rotate-0. It actually sets the starting point of CSS transition
.rotate-0 {
--tw-rotate: 0deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
Just remove rotate-0 from both of your examples and now there is no difference in transition. So what is happening?
It all comes in CSS transition from state 1 to state 2. (Let's remove last
parts with skew and scale)
First example - from translate(0, 0) rotate(0deg) to rotate(1020deg)
Second - from translate(0, 0) rotate(0deg) to
translate(0, 0) rotate(1020deg)
MDN says
The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.
See example: red square just rotating. Yellow - rotates but returns back to default position even on hover we do NOT changing translate property. We're assuming it will left the same but this is not how CSS transition works. When there are multiple transform occurrence the last one will override previous. That's why translate is not applied anymore on hover - we're "erasing" it. In order to fix it we need to keep translate on hover (blue example)
.example {
width: 60px;
height: 60px;
margin: 40px;
transition: 1000ms;
}
.example-1 {
background-color: red;
transform: rotate(0);
}
.example-2 {
background-color: yellowgreen;
transform: translate(100px) rotate(0deg);
}
.example-3 {
background-color: blue;
transform: translate(100px) rotate(0);
}
.example-1:hover {
transform: rotate(45deg);
}
.example-2:hover {
transform: rotate(45deg);
}
.example-3:hover {
background-color: blue;
transform: translate(100px) rotate(45deg);
}
<div class="example example-1"></div>
<div class="example example-2"></div>
<div class="example example-3"></div>
And that's exactly what happening in your example - you are missing translate function in compiled CSS and changing the default state of transformed object (it is not transitioning anymore - it just places the new state). We need to keep the order of the chaining functions in transform property to ensure everything will work as expected
So, few ways to fix it in Tailwind keeping initial state (rotate-0 class), both requires to change hover:[transform:rotate(1020deg)] class
First - add missing translate function - change class into hover:[transform:translate(0,0)_rotate(1020deg)]
Second - not so obvious - change --tw-rotate variable value, basically convert class into hover:[--tw-rotate:1020deg]
And finally as I said - just remove initial state (rotate-0) but sometimes it is not an option
See examples
It's not the best explanation but I tried to point you in some direction where the difference comes from
I'm doing an animation with CSS variables, where a CSS variable value changes based on the page scroll. That variable is then used on animation with keyframes.
Originally it's updating correctly only on Firefox. Meanwhile, I found a way to make it work on Chrome too, by forcing a repaint, in this case, animate the color from #000 to #001.
/* --scale is dynamic changed by JS */
#keyframes move {
0% {
transform: translateX(0) scale(var(--scale));
color: #000;
}
100% {
transform: translateX(33vw) scale(1.5);
color: #001;
}
}
You can see a demo at codepen
I also ran into this issue and solved it by setting the element.style.animation attribute in JavaScript after calling setProperty(). It seems like #keyframes doesn't update after setting the animation in CSS.
This is a WebKit bug. I discovered this issue today by reading Safari Technology Preview 149 changelog, which means it should be fixed in Safari 16, to be released later this year.
Added support for custom properties in #keyframes rules (251733#main)
An alternative for those (like myself) who are using Styled Component's keyframes`` function, you can exchange the css variable for a prop by defining a function much like the following:
import styled, { Keyframes, keyframes } from 'styled-components';
const move = (scale: number): Keyframes => keyframes`
0% {
transform: translateX(0) scale(${scale});
color: #000;
}
100% {
transform: translateX(33vw) scale(1.5);
color: #001;
}
`
const AnimatedElement = styled.div<{ scale: number }>`
animation: ${(props) => move(props.scale)} 2s linear infinite;
`
I'm trying to create a 100% width and 100vh height div which would slide from out of the screen from above to down of page. At the 70% of animation I would like to make it at the bottom then at 90% move it 30px up and on 100% make it at the bottom again so it would look like it slide from up then bounce at the bottom.
I want this happen after clicking some DOM element in a grand grandchild so basically, I'll use eventBus and my "sliding div" will be in root component (app.vue) and in the child I'll emit:
showObserved() {
eventBus.$emit('showObserved');
}
here I'm emitting my custom event and then I'm watching this event in root component and changing boolean variable:
eventBus.$on('showObserved', async() => {
this.showObserved = true;
});
eventBus.$on('hideObserved', async() => {
this.showObserved = false;
});
and basing on this boolean I'm displaying my sliding div using v-if directive:
<transition name="slide-up" mode="out-in">
<observed-offer v-if="showObserved"></observed-offer>
</transition>
and here finally I use transition vue built-in component in order to make it sliding and this are my styles which should make effect that I explained in first parahraph:
/* slide from up to down */
.slide-up-leave-active {
animation: slide-out-up .4s linear;
}
.slide-up-enter-active {
animation: slide-in-up .4s linear forwards;
}
.slide-up-in-leave-active {
animation: slide-out-up .4s linear;
}
.slide-up-leave {
opacity: 1;
transform: translateY(-100%);
}
#keyframes slide-out-up {
0% {
transform: translateY(0);
}
70% {
transform: translateY(0);
}
90% {
transform: translateY(10%);
}
100% {
transform: translateY(0);
}
}
#keyframes slide-in-up {
0% {
transform: translateY(-100%);
}
70% {
transform: translateY(0);
}
90% {
transform: translateY(10%);
}
100% {
transform: translateY(0);
}
}
and this are style's of my sliding div:
.observed {
width: 100%;
height: 100vh;
z-index: 999999999;
overflow: hidden;
background-color: white;
}
But this doesn't work behavior is that it instantly makes entire page white and slide only content of div. I'm pretty sure that I just made wrong CSS styles I tried various other styles and it didn't work. Also maybe it has also something to do with height: 100vh.
I add demo repository. In this demo sliding in is almost working but slide out doesn't work at all. Installation of this project is simple just clone it then cd path/to/project then npm install && npm run dev or something similiar depending on OS.
In demo it's also not hovering entire page but it leave space for button as you'll see if you clone it.
Well actually I handle to fix transitions in demo repo now the only issue is that it doesn't veil/cover entire page but it leave space for root content. Pull repo again to see that.
Issue was that I was using bad transition styles and that I didn't have fixed position with top: 0 left: 0 on my panel component. After fixing that it's working correctly as you can inspect in demo repository.
Sorry for wasting time for issue that I fixed myself but it was much harder to troubleshoot in origin big project. When I created this demo repo it became so easy.
This is how it was done in Bootstrap 3:
.modal.fade .modal-dialog {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
Or something like this would have worked as well:
.modal.fade .modal-dialog {
transform: translate3d(0, -25%, 0);
}
.modal.in .modal-dialog {
transform: translate3d(0, 0, 0);
}
The magic obviously happened in the modal classes with the transform property. But this does not work in Bootstrap 4. I am specifically using Bootstrap v4.0.0-alpha.5. What changes do I need to make to achieve the same effect?
Demo url - https://jsfiddle.net/qww47vfn/
Found it, apply the following CSS:
.modal.fade .modal-dialog {
-webkit-transform: translate(0,25%);
-ms-transform: translate(0,25%);
-o-transform: translate(0,25%);
transform: translate(0,25%);
}
I've inverted the transform origin, instead of -25%, it's now 25% (effectively making it fade in from below). Adjust the amount to adjust the initial fade in position.
What changed?
Instead of translate3d the property translate is now being used, so changing the original values won't matter since the model listens to the new properties now.
Side note:
This doesn't work when you implement it as a new rule for some reason, I don't have a local version of bootstrap, but changing it inside the DevTools solved it for me. I suppose you need to overwrite the initial code to change it.
I am trying to implement a slide in/out animation when transitioning between ui-views.
Here's a plunker. (Navigate from Home > About > Home)
When a new view appears, the old view jumps down below it. The intention is for the old view to seamlessly slide off left with no vertical movement, like a carousel.
I am aware of the position: absolute solution to this; but doing this rather messes up other elements of my layout; I'd like to keep the elements in the page flow. I have tried all manner of combinations of display, position etc.
.slide-left {
position: relative;
transition: all 1s ease-in-out;
margin: 1em;
}
.slide-left.ng-enter {
transform: translateX(110%);
opacity: 0;
}
.slide-left.ng-enter-active {
transform: translateX(0);
opacity: 1;
}
.slide-left.ng-leave {
transform: translateX(0);
opacity: 1;
}
.slide-left.ng-leave-active {
transform: translateX(-110%);
opacity: 0;
}
Are there any other solutions? How do carousels work? (Off to check their source code...)
Edit:
Having checked Bootstrap's source code, they use position: absolute when the slide animation is in progress (.next and .prev classes). I'm concluding that the use of absolute is unavoidable for this effect to work; at least it only has to apply during the effect.