I want to display a div in right side exactly what the following CSS does but using translate3d
div {
position: absolute;
right: 0;
top: 0;
}
I have tried the following but its working only in Chrome.
div {
-webkit-transform: translate3d(100vw,0,0);
-moz-transform: translate3d(100vw,0,0);
-o-transform: translate3d(100vw,0,0);
transform: translate3d(100vw,0,0);
}
UPDATE
Please check the fiddle. http://jsfiddle.net/7LLbu/
I need the same toggle function using translate3d.
Kindly help me fix this.
html, body {
margin: 0;
padding: 0;
}
.float-left3d {
-webkit-transform: translate3d(100vw,0,0) translateX(-100%);
-moz-transform: translate3d(100vw,0,0) translateX(-100%);
-o-transform: translate3d(100vw,0,0) translateX(-100%);
transform: translate3d(100vw,0,0) translateX(-100%);
}
div {
width: 250px;
height: 400px;
background: green;
}
<div class="float-left3d">
Fiddle: http://jsfiddle.net/VjgGY/1/
What we are doing is saying "First put it on the right of the viewport, and then because it sticks out by the width of the div do subtraction translateX by the width of the div"
This works fine;
.translate3d(~"calc(100vw - 276px)", 0, 0);
Where theres a will theres a way! Or more likely a hack using JS...
var container = document.getElementById('container');
var translatedChild = document.getElementById('child');
var rightEdge = container.offsetLeft + container.offsetWidth;
var translation = rightEdge - translatedChild.offsetWidth;
translatedChild.style.transform = "translate3d("+translation+",0,0);
Rinse & repeat for vender prefixed CSS. Should work with variable width container, you'll have to update it when the page resizes if your designing responsively though.
Related
This is pretty hard to explain so I made a codepen. Try opening it in Chrome and in Safari and click in the codepen viewport to see the difference:
https://codepen.io/matt_o_tron_5000/pen/gOMaKmY
Basically, we have this dot that follows the cursor around with the help of some javascript. A CSS animation makes it gently grow/shrink at all times, and when you click the dot reacts by shrinking substantially.
In Chrome and Firefox, when you click, the dot shrinks to the center, where the mouse pointer is located. But in Safari, it shrinks to the upper left corner. I found that by removing the CSS animation, this is resolved. But I can't figure out why.
Any idea how I can fix this behavior in Safari?
Aaaaaand apparently I can't post this unless my codepen link is "accompanied by code". So here's some code.
// HTML
<span id="custom-cursor"></span>
// CSS
#custom-cursor {
position: fixed;
display: block;
width: 6rem;
height: 6rem;
border-radius: 50%;
background-color: red;
transform: translate3d(-50%, -50%, 0) scale(1);
transition: 0.1s ease-out;
transition-property: width, height, transform;
animation: growshrink 4s infinite;
&.clicking {
width: 1rem;
height: 1rem;
}
}
#keyframes growshrink {
0% {
transform: translate3d(-50%, -50%, 0) scale(1);
}
50% {
transform: translate3d(-50%, -50%, 0) scale(1.3);
}
100% {
transform: translate3d(-50%, -50%, 0) scale(1);
}
}
// Javascript
(function () {
var follower, mouseX, mouseY, positionElement, timer;
follower = document.getElementById('custom-cursor');
console.log(follower);
mouseX = event => { return event.clientX; };
mouseY = event => {return event.clientY;};
positionElement = event => {
var mouse;
mouse = {
x: mouseX(event),
y: mouseY(event),
};
follower.style.top = mouse.y + 'px';
follower.style.left = mouse.x + 'px';
};
window.onmousemove = event => {
if(!timer){timer = false;}
var _event;
_event = event;
return timer = setTimeout(() => {
return positionElement(_event);
}, 5);
};
}).call(this);
$(document).on('mousedown', function() {
$('#custom-cursor, #imghover-cursor').addClass('clicking');
});
$(document).on('mouseup', function() {
$('#custom-cursor, #imghover-cursor').removeClass('clicking');
});
Browsers render code differently.... one can either update its code so that it behaves like one wants in the 'supported browsers' for the project OR go a user-agent sniffing way/per browser-type approach I don't recommend that and I never do that just because there's almost always a way to do it with option #1 which is much simpler, cleaner and easier [changing the library you use and/or tweaking your existing code].
When I suggest 'changing the library for animation' I mean more specifically use an open-source community-vetted one like GSAP. https://greensock.com/gsap/
But if you want to go down the rabbit hole, please start here :
https://github.com/WhichBrowser/Parser-PHP
chrome leaves extra space after transformation.
to reproduce issue:
switch on responsive mode (for example take iphone 5/SE)
because of element x position + element width is greater then viewport with the horizontal scrollbar will appear. its ok but the thing is when u click the button "update transformation" (it will just update/transforms the element x position) after that there is no need for extra space or horizontal scrollbar but seems chrome doesn't updates a viewport size. (in this example width is a same after transformation).
P.S. it works correctly in FF
<h2>test transform</h2>
<a href="/" class="hp-section-image-zebra">
<img src="https://uploads- ssl.webflow.com/5a7bafaa69f239000170771c/5a7e5dcdd2e04c0001f3fcdc_desktop.png" alt="Refurbished Apple Desktops">
</a>
<button onclick="updateTransformation()">update transformation</button>
<style>
body{
border: solid black;
}
.hp-section-image-zebra{
display: inline-block;
transform: translate(300px, 0px);
}
</style>
<script>
function updateTransformation() {
var el = document.querySelector('body > a');
el.style.transform="translateX(0px)";
}
</script>
codepen example
Use this css for all browsers:
.hp-section-image-zebra{
display: inline-block;
-webkit-transform: translate(300px, 0px);
-moz-transform: translate(300px, 0px);
-ms-transform: translate(300px, 0px);
-o-transform: translate(300px, 0px);
transform: translate(300px, 0px);
}
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.
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.
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>