My bootstrap modal has animation with translate.
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
So bootstrap modal fade from top to middle. Everything works fine, but transition is reset when i want to apply scale for this modal like :
.modal.in .modal-dialog {
transform: scale(1.5)
}
so it's okay that my scale reset my translate so i apply mutliple transform conditions :
.modal.in .modal-dialog {
transform: scale(1.5) translate(0,0)
}
but in that case my modal behave like translate and scale in same time and the effect is like zoomIn.
How can i apply that modal dialog is first scale and then on scaled modal apply transition from top to middle ?
Please help !
What you are looking for are so called "keyframes" (if you want to know more, have a look here).
I created a fiddle and tested it shortly: Modal example with keyframes
The following code handles the transformations (scale and translate)
#keyframes mymove {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
100% {transform: scale(1.2) translate(0, 100px);
}
Then you call "animation" instead of "transition" to make the keyframe work like this:
animation: mymove 2s ease-out;
Once the animation is finished, the state of the modal will go back to normal (no scale, no transition) - that's why we have to add the following line:
transform: scale(1.2) translate(0, 100px);
Hope this helps!
Related
I have two components and a fade-in/fade-out animation set up for them.
For a brief moment, both components exist on the page at different opacities, and the scrollbar shows up and disappears.
Is there a way to avoid this? A way to start the fade-in animation only after the fade-out animation is done?
The Animation:
.view-leave-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
}
.view-enter-active {
transition: opacity 0.5s ease-in-out, transform 0.5s ease;
transition-delay: 0.5s; /* Increasing this doesn't seem to work */
}
.view-enter, .view-leave-to {
opacity: 0.5; /* It should be 1, but setting it to 0.5 allows you to see exactly what's happening */
}
.view-enter-to, .view-leave {
opacity: 1;
}
Any help would be very much appriciated!
To further elaborate on my comment: VueJS transition components support the mode property, where you can specify the sequence of transitions when toggling between two elements.
Since you do not want both elements to appear at the same time when one is transitioning in while the other is transitioning out, you should be using:
mode="out-in"
Based on the documentation:
out-in: Current element transitions out first, then when complete, the new element transitions in.
Using JSSOR slider the function ScaleSlider() calls $ScaleWidth to resize the slider according to the viewport. This is achieved by applying a transform style to the #slider1_container element.
transform: scale(0.756364);
However, this also causes any text in the caption to be resized, rendering it illegible.
<div id="slider1_container">
<div u="slides">
<div u="caption" class="myCaption">
<p>Text goes here</p>
</div>
<img u="image" src="myImage.jpg" />
</div>
</div>
How can I prevent the caption text (.myCaption) to be affected by the transform style?
This was a very irritating issue, our designer kept complaining about the automatic resizing.
What i did to deal with this was:
1.Created a function to scale the div that holds my captions back to its original size. The div its originally hidden and after applying the transformation is shown. The original size of my slider is 1920 px width, so i am using that to calculate the percentage of the browser resizing in order to scale the captions back
function ScaleCaptions(){
bodyWidth = document.body.clientWidth;
widthChange=1920/bodyWidth;
if(bodyWidth<992){widthChange=widthChange/1.5;}
$(".captionHolder").css("transform","scale("+widthChange+")");
$(".captionHolder").show();
}
I call this function for the following 3 events, after the ScaleSlider function is called:
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
$(window).bind("load", ScaleCaptions);
$(window).bind("resize", ScaleCaptions);
$(window).bind("orientationchange", ScaleCaptions);
If you want to resize the captions at some point, css rules wont work, so you have to do it with jquery. In my case i wanted to resize the captions below 992px, so i added this line of code in my function
if(bodyWidth<992){widthChange=widthChange/1.5;}
i would disagree with the above approach, sorry for writing another answer but i could not comment. Even when adding css rules for well established breakpoints(768,992,1200, so on), the text continues to resize along the slider, with the difference of starting from the text size declared in the css rules. So for example if i wanted for 768px the font size to be 16px, although it would start from 16px at 768px, it would continue to resize along the slider, which is not what i want. Also 16px font size at 1200px resolution, and 16px font size at 768px resolution have a huge difference, with the second case the text being very tiny
I have similar automated function which works for my solution:
function ScaleSliderCaptions(id,obj){
//var parentWidth = jQuery('#'+id).parent().width();
var bodyWidth = document.body.clientWidth;
var widthChange=obj.$GetOriginalWidth()/bodyWidth;
if(bodyWidth<(obj.$GetOriginalWidth()/2)){widthChange=widthChange/1.5;}
jQuery(".slider-content").css("transform","scale("+widthChange+")").show();
}
obj - slider object created before,
id - slider_container
Caption should always scale along with slider. There is no option to stop caption from scaling.
Css trick below may meet your needs,
#media only screen and (max-width: 480px) {
.myCaption{
...;
font-size: 24px;
...;
}
}
#media only screen and (max-width: 768px) {
.myCaption{
...;
font-size: 16px;
...;
}
}
#media only screen and (min-width: 769px) {
.myCaption{
...;
font-size: 12px;
...;
}
}
Bootstrap 3:
I'm trying to float a button center halfway outside the panel-footer. But the whole layout is responsive so I need to have it when the screen size is resized or smaller it is still correct.
I created a bootply with my attempt that is close but doesn't stay when the screen is resized.
Thanks,
Nate
Bootply Trial
Is this what you wanted to get? http://www.bootply.com/114327
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.bottom-btn {
left: 50%;
bottom: -17px; /* half of the button height */
margin-left: -77px; /* half of the button width */
/* instead of bottom and margin-left, you can use translateX as well. */
}
play with css position property and use margin to get exact position. see the comments for the .bottom-btn class.
I'm creating a card-flip effect using webkit transformations. I have it working as I like in one section, where I have a DIV that rotates around its center axis giving the look of a card that is flipping over.
I now want to add this same effect to a page transition. I'm using the same CSS and HTML structure, but in this case I'm not getting an effect that rotates around a center axis.
Instead, it looks like the transformation is rotating along the y axis anchored to the left of the object rather than the center (so it looks like a door opening, rather than a card flipping).
I've been reading through the spec's but can't figure out which property controls the rotation axis' position. What do I need to add or change with this to get the flip working?
html structure:
<div id="frontbackwrapper">
<div id="front"></div>
<div id="back"></div>
</div>
and the css (.flip is being added via jQuery to start the effect)
#frontbackwrapper {
position: absolute;
-webkit-perspective: 1000;
-webkit-transition-duration: 1s;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
#frontbackwrapper.flip {
-webkit-transform: rotateY(180deg);
}
#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
-webkit-transform: rotateY(180deg);
-webkit-transition: 1s;
}
#front, #back {
position: absolute;
-webkit-backface-visibility: hidden;
}
#back {
-webkit-transform: rotateY(180deg);
}
Try this on your wrapper
-webkit-transform-origin: 50% 0 0;
Though you may or may not have to have its width explicitly set.
I am trying to do a images gallery for mobile webkit,
The only way it is actually fast enough is using the hardware accelerated translateX .
My problem is that the div take back its initial position at the end of the animation. I add the slideGalLeft class cliking on the left button. to the animated div
You can see an example here, in the callback events section:
http://position-absolute.com/jqtouch/demos/main/#home
.slideGalLeft {
-webkit-animation-name: slideColis;
}
#-webkit-keyframes slideColis {
from { -webkit-transform: translateX(0%); }
to { -webkit-transform: translateX(-100%); }
}
Do not use webkit animation for this as it comes back to the default values once played.
Instead define
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%);
}
and using Javascript, either set -webkit-transform: translateX(100%); or add a CSS class to your element which set the final transform value and webkit will animate it properly
Guillaume's answer is great. However, if you are looking for hardware acceleration, you must let the webkit engine know you want 3D rendering (what makes hardware acceleration active).
According to http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell, this is done by adding translateZ(0) to your rule, like so:
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%) translateZ(0);
}
Follow Guillaume's advice beyond that.
Use:
-webkit-animation-fill-mode: none/backwards/forwards/both;
This allows you to define at what end of your animation the element remains when the animation is finished.
I was able to make it work by adding a "display:none" style on the finish of the animation. Use the following CSS:
.paused {
-webkit-animation-play-state: paused;
}
.hiddendiv {
display:none;
}
Then in your jQuery code:
$('div.sideimage').click(
function () {
$(this).removeClass("paused").delay(2000).queue(
function(next) {
$(this).addClass("hiddendiv");
next();
}
);
}
);
Should work!