how to make transition of background-color of ion-toolbar?
The problem is, in Ionic 4 the background-color is set by --background.
This is my NOT working .scss code:
ion-toolbar.transparent{
--background: red;
transition: 1000ms linear;
}
ion-toolbar.transparent:hover{
--background: green;
}
Please check the below codes, remove the transparent class name from the ion-toolbar, also don't use color attribute in ion-toolbar
<ion-toolbar>
<ion-title>
Ionic Title
</ion-title>
</ion-toolbar>
For style
ion-toolbar{
--background: red;
transition: 1000ms linear;
}
ion-toolbar:hover{
--background: green;
}
Related
I am new to animations in css.
I have just upgraded primeng version to v12 to my angular application 11.
I am using primeng sidebar. the sidebar after closed, the overlay is not disappearing.
Can see p-component-overlay-leave classes is added to the overlay but since there is no corresponding animation css available it is not disappearing. can anyone show me how to add this so the overlay disappears after the sidebar is closed.
css added for overlay enter:
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
animation-duration: 150ms;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
animation-name: p-component-overlay-enter-animation;
}
trying to add the following but not sure how to add the respective css:
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forward;
}
Added the following and it worked
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
#keyframes p-component-overlay-leave-animation {
from {
background-color: rgba(0, 0, 0, 0.4);
}
to {
background-color: transparent;
}
}
I am using bootstrap vue and am trying to animate/transition the drop downs. This is proving to be fairly difficult as they do not use v-if or v-show so the transition will not work. Alternatively because the way the components work if you use v-if the drop down trigger will be hidden. I can't find anything online to bootstrap vue specifically on this but I feel this shouldn't be as tough as it has turned out to be. thanks for any help you can give
<div id="app">
<b-navbar type="dark" fixed>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="Tools">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
// This won't work as it hides the main dropdown trigger right form the start
<b-nav-item-dropdown text="Tools" v-if="toggleDropdown">
<b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
<b-dropdown-item to="/export"> Item 2</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-navbar>
</div>
<script>
export default {
name: 'nav',
data () {
return { toggleDropdown: false }
},
mounted: function () {
// I can listen for events here but I still can't trigger the transition
this.$root.$on('bv::dropdown::show', bvEvent => {
this.toggleDropdown = true
})
this.$root.$on('bv::dropdown::hide', bvEvent => {
this.toggleDropdown = false
})
}
}
</script>
<style lang="scss">
.navbar {
.dropdown-menu {
transform-origin: top;
transition: transform 10s ease-in-out;;
}
}
.dd-slide-enter,
.dd-slide-leave-to { transform: scaleY(0); }
</style>
It's pretty hard to achieve a clean slide-up/down animation because BootstrapVue uses display:none/block to hide/show the dropdown menu. What you can do it's manipulate the max-height of the element as explained here.
I added an 'animated' class to the parent element, for example your b-navbar to select which dropdown has to be animated. Then i removed display: none from the default status of the dropdown and hidden it setting its max-height and padding to 0 and its border to none. When you click the button the dropdown gets the class 'show'so you can give it a max-height different than 0, as explained in the answer i've linked to you, you have to set it higher than the actual height of the dropdown menu otherwise it gets cropped out.
.animated {
.dropdown-menu {
overflow: hidden;
display: block!important;
max-height: 0!important;
&:not(.show) {
padding: 0;
border: none;
}
&.show {
transition: max-height 300ms ease-in-out;
max-height: 500px!important; //this must have to be higher than the max height of the dropdown list
}
}
}
Just came across this same issue.
Ended up following with previous example, but this one works for both up/down transitions and doesn't mess with overflows in case you want to add triangles.
.dropdown-menu {
border: 1px solid #ebeef5;
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.25);
// Slide down transtion
display: block !important;
&:not(.show) {
padding: 0px;
border-width: 0px;
border-color: transparent;
box-shadow: none;
transition: padding 1.3s ease, border-width 1.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
> li {
max-height: 0px;
overflow: hidden;
transition: max-height 0.3s ease;
}
&.show {
> li {
max-height: 100px;
}
}
// Add chevron to top
&[x-placement^="bottom"] {
&::before {
content:"";
position: absolute;
right: 11px;
top: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #fff transparent;
z-index: 99999999;
}
}
// Add chevron to bottom
&[x-placement^="top"] {
&::after {
content:"";
position: absolute;
right: 11px;
bottom: -5px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #fff transparent transparent transparent;
z-index: 99999999;
}
}
}
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;
In elementUI, I've got a el-menu component and there is a el-submenu in it,
I can change the bg-color of el-menu-item when I hover it and I code like
.el-menu-item:hover {
background-color: black;
color:white
}
however when I do the same to the el-submenu, it failed
.el-submenu:hover{
background-color: black;
color:white;
}
I tried another way
.el-submenu.is-opened {
background-color: black;
color:white;
}
also can't work
it appears like that
and I want to change the bg-color when I hover the submenu and when it is open
I had the same problem and found that you can do the following to change the background color when hovering over a el-submenu:
.el-submenu__title:hover {
background-color: #000 !important;
}
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;
}
}