I'm following the guide here https://v2.vuejs.org/v2/guide/transitions.html to animate a popup and their overlay. I need the overlay with a final opacity of 0.5 but Vue set it to 1 at the end. I tried something like this, but Vue animate the opacity to 0.5 and abruptly change it to 1 at the end of the animation:
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 2s;
}
.fade-enter-to {
opacity: 0.5;
}
Here is a test that illustrate the problem https://jsfiddle.net/50wL7mdz/58865/
Update
Working solution https://jsfiddle.net/50wL7mdz/58877/ There is no need to add the final opacity to the fade classes.
You need to also set the opacity on the .overlay class (this is what will be used after the transition has finished):
.overlay {
width: 50px;
height: 50px;
background-color: red;
opacity: 0.5;
}
Here's a fiddle.
Related
How to make Vue2-leaflet map have 100% height of its parent container?
When I set its style to style="height: 100%" it is overwriting whole page on first interaction with the map and tile layer isn't showed at all.
Use calc(100% - 100px) for #map-wrapper because #some-div has a height of 100px in your example.
Then the scrollbar disappears.
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: calc(100% - 100px);
margin: 0;
}
Fiddle: https://jsfiddle.net/yLe9n1uk/
Or use a flexbox for the parent div (#app):
#app {
display: flex;
flex-direction: column;
}
#some-div {
height: 100px;
}
#map-wrapper {
background-color: red;
height: 100%;
margin: 0;
}
Fiddle: https://jsfiddle.net/xo5z8r7q/
So I have the following code:
HTML:
<transition name="slide-left-centered">
<div v-if="test" style="position: fixed; transform: translate(0, 100%)">
test code
</div>
</transition>
CSS:
.slide-left-centered-enter,
.slide-left-centered-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-left-centered-enter-active {
transition: all .3s ease;
}
.slide-left-centered-leave-active {
transition: all .5s ease;
}
If I were to toggle it on and off, it only fades with the opacity but does not move. This works once I remove transform from the HTML.
https://codesandbox.io/s/92mv6ov6xy
I have figured out the problem
This won't work as inline styling takes precedent.
In my real problem, it is using a class which is a child of another class. The reason why it didn't work was because of specificity. I have added !important to the transition class and now it works e.g.
transform: translateX(-100%) !important;
I have been trying to make this owl-carousel by John Higgins (http://jonhiggins.co.uk/words/animated-rotating-cursor-over-carousel/) work with bootstrap.
This theme makes the cursor act like 'prev' and 'next' buttons when hovering the carousel image. But it seem that when I put html into a responsive container of bootstrap it somehow messes with the cursor.
When the browser width is expanded you will notice that the arrow doesn't switch from right to left. Please have a look at the fiddle.
https://jsfiddle.net/ftpptf/c6nw8yzt/
/* BEGIN Cursor*/
.cursor {
display: none;
top: 0;
left: 0;
position: fixed;
z-index: 1000;
width:33px;
height:54px;
margin-top: 60px;
margin-left: 33px;
pointer-events: none;
&.isVisible {
display: block;
}
}
.js--visible {
display: block;
}
.cursor__icon {
width:32px;
height:32px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAw MC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIiBpZD0ic3ZnIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsa W1pdD0iMTAiIGQ9Ik0yNC4xIDMwTDcuOSAxNiAyNC4xIDIiPjwvcGF0aD48L3N2Zz4=');
background-repeat:no-repeat;
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
-o-transition: -o-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
.carousel.offScreen .cursor {
display: none;
}
.carousel.right .cursor__icon {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* END Cursor*/
I have set .cursor .cursor__icon position = absolute which seemed to help but it still acts weird.
I have tried loads of different settings but without any good results!
Any help will be highly appreciated - thanks in advance!
Glad the Codepen example is of use to you.
It looks like the issue is that your carousel's left edge isn't at 0px (far left of the window), it's halfway across the screen. My example didn't account for this scenario as the carousel filled the viewport horizontally.
Hopefully this fiddle resolves that: https://jsfiddle.net/jonjhiggins/z915kbe3/
Changes made were:
CSS: making the carousel and images 100% width instead of 800px (so that it will responsively fill the width of whatever you set it's parent to)
.carousel {
width: 100%;
cursor: none;
}
.carousel img {
width:100%;
}
JS: changing initLayout to account for when the carousel isn't on far left of screen
var _initLayout = function () {
left = $element.offset().left;
right = left + ($element.width() / 2);
};
JS: add resize event to re-calculate the left/right positions when the window is resized or device is rotated
var _initEvents = function () {
$element.on('mousemove', _mousemove)
.on('click', _click);
$(window).on('resize', _initLayout);
};
I am trying to override the CSS of a back button in a Sencha Touch 2 Navigation View. Using this CSS
#ext-container-1 .x-button {
background: url(../images/button_zurueck.png) no-repeat;
width: 55px;
height: 55px;
margin-top: 120px;
margin-right: 26px;
border: none;
}
I was able to show the image but the width attribute is overidden by the style attribute set on the button so only a small part of the button is shown. This ist the content of the style attribute left after the button animation:
element.style {
left: 0px !important;
-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotate(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1) scaleZ(1) !important;
opacity: 1 !important;
width: 16px !important;
}
How can I override the width of the button?
This is a bug in 2.0.0 and has already been fixed by Sencha for the next release.
More information: http://www.sencha.com/forum/showthread.php?188982
I was able to show the full button by adding right padding. Its dirty but its work. Looking forward for the next release of Sencha Touch.
At the end I got rid of that button totally and inserted my own button which simulates the "back" functionality.
On the card:
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls: 'back',
ui: 'plain'
}
}
}
On the CSS:
//Back
.x-button-icon.back {
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;
}
I want a custom webkit-scrollbar to animate a different background color for the hover state. The code below changes the color on hover but doesn't animate anything. It works on a div so I suspect webkit-scrollbar doesn't play nice with transitions.
::-webkit-scrollbar-thumb {
background-color: #a8a8a8;
-webkit-transition: background-color 1s linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #f6f6f6;
}
No, it is not implemented. We should file a bug on http://bugs.webkit.org/
You can still apply your transition by setting your -webkit-scrollbar-thumb background-color to inherit and apply transition to parent element - in this case the scrollbar container itself.
The only drawback is that, you have to create an inner container that would mask it's parent color and set scrollbar track background to the same masking color. Here it is an example:
Set container colors and transition
.container {
-webkit-transition: background-color 1s linear;
background-color: #fff;
}
.container:hover {
background-color: #cfcfcf;
}
.container .inner {
background-color: #FFFFFF;
}
Set scrolbar colors
::-webkit-scrollbar-thumb {
background-color: inherit;
}
::-webkit-scrollbar-track {
background: #fff;
}
It is fairly easy to achieve using xb1itz's background-color: inherit; technique in addition with -webkit-background-clip: text;.
Live demo; https://jsfiddle.net/s10f04du/
#media screen and (-webkit-min-device-pixel-ratio:0) {
.container {
overflow-y: scroll;
overflow-x: hidden;
background-color: rgba(0,0,0,0);
-webkit-background-clip: text;
transition: background-color .8s;
}
.container:hover {
background-color: rgba(0,0,0,0.18);
}
.container::-webkit-scrollbar-thumb {
background-color: inherit;
}
}