i have Jssor Slider , i want to make the 2 arrows left and right appear and display with fadein and fadeout
- when mouse over the 2 arrow fadein
- when mouse out the 2 arrows fadeout
any suggestion
thanks
Given there is an arrow navigator skin 'skin\arrow-01.source.html', please add following css code to to this job.
#slider1_container .jssora01l, #slider1_container .jssora01r {
opacity: 0;
}
#slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
opacity: 1;
}
.jssora01l, .jssora01r {
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
And finally you will get the following arrow navigator skin,
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 01 css */
/*
.jssora01l (normal)
.jssora01r (normal)
.jssora01l:hover (normal mouseover)
.jssora01r:hover (normal mouseover)
.jssora01ldn (mousedown)
.jssora01rdn (mousedown)
*/
.jssora01l, .jssora01r, .jssora01ldn, .jssora01rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a01.png) no-repeat;
overflow:hidden;
}
.jssora01l { background-position: -8px -38px; }
.jssora01r { background-position: -68px -38px; }
.jssora01l:hover { background-position: -128px -38px; }
.jssora01r:hover { background-position: -188px -38px; }
.jssora01ldn { background-position: -8px -38px; }
.jssora01rdn { background-position: -68px -38px; }
#slider1_container .jssora01l, #slider1_container .jssora01r {
opacity: 0;
}
#slider1_container:hover .jssora01l, #slider1_container:hover .jssora01r {
opacity: 1;
}
.jssora01l, .jssora01r {
-webkit-transition: opacity 0.25s linear;
-moz-transition: opacity 0.25s linear;
-o-transition: opacity 0.25s linear;
transition: opacity 0.25s linear;
}
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora01l" style="width: 45px; height: 45px; top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora01r" style="width: 45px; height: 45px; top: 123px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
Related
When using transitions and v-if, it seems that the div is created and then animation happens within that div. Is it possible to make div follow the text during the animation?
Example provided, when clicking on the button, the button jumps to side and then text slides into meet it. What I'm aiming for is the button to slide with text when button is clicked.
Example: https://codepen.io/tadhglydon/pen/WNyVQZa
<div id="app">
<div class="container"><div class="filler"></div>
<button v-on:click="SlideIn">Test</button>
<transition name="slide">
<div v-if="toggle">Status update</div>
</transition>
</div>
</div>
.container {
width: 200px;
height: auto;
display: flex;
}
.filler{
flex-grow: 1;
}
.slide-leave-active,
.slide-enter-active {
transition: 1s;
}
.slide-enter {
transform: translate(100%, 0);
}
.slide-leave {
transform: translate(-100%, 0);
}
var app = new Vue({
el: "#app",
data: {
toggle: false
},
methods: {
SlideIn: function () {
this.toggle = !this.toggle;
}
}
});
Fixed this by using CSS and letting Vue controlling the transitions.
In the HTML I have
<div class="slider" :class="toggle ? 'slided' : ''">
And then in the CSS I have:
.slider {
width: 0px;
overflow: hidden;
transition: width 900ms ease;
-moz-transition: width 900ms ease;
-ms-transition: width 900ms ease;
-o-transition: width 900ms ease;
-webkit-transition: width 900ms ease;
}
.slided {
width: 100px;
}
it runs great on desktop but so janky on mobile :( sorry can't show you the result bcs I can't get permission TT_TT basically the animation is about having objects in 3D context of one perspective flying through z-index to your direction (and gets blurry when nearer)
I suspect it might have something to do with moving thousands of pixels? :(
How can I improve performance for mobile? Thanks!
HTML:
`
<template>
<div :class="{'js-loading': !hasLoaded}">
<img class="circle-bg" src="../assets/scene2-coins/circle-big-bg.svg" alt="circle-bg" #load="onImgLoad">
<img class="circle-bg--2" src="../assets/scene2-coins/circle-big-bg.svg" alt="circle-bg--2" #load="onImgLoad">
<img class="coin-silver" src="../assets/scene2-coins/coin-silver.svg" alt="coin-silver" #load="onImgLoad">
<img class="stars" src="../assets/scene2-coins/stars.svg" alt="stars" #load="onImgLoad">
<img class="confetti" src="../assets/scene2-coins/confetti.svg" alt="confetti" #load="onImgLoad">
<img class="confetti--2" src="../assets/scene2-coins/confetti.svg" alt="confetti--2" #load="onImgLoad">
<img class="coin-platinum" src="../assets/scene2-coins/coin-platinum.svg" alt="coin-platinum" #load="onImgLoad">
<img class="coin-gold" src="../assets/scene2-coins/coin-gold.svg" alt="coin-gold" #load="onImgLoad">
<img class="coin-diamond" src="../assets/scene2-coins/coin-diamond.svg" alt="coin-diamond" #load="onImgLoad">
</div>
</template>
`
SCSS:
`
<style lang="scss" scoped>
.js-loading *,
.js-loading *:before,
.js-loading *:after {
animation-play-state: paused !important;
}
div {
display: flex;
justify-content: center;
align-items: center;
perspective: 500px;
perspective-origin: 50% 50%;
img {
position: inherit;
display: block;
}
///////////////////////////// BACKGROUND
.circle-bg {
min-width: 1200px;
min-height: 1200px;
// animation: circle-bg 1000ms linear both 2000ms;
animation-name: circle-bg;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes circle-bg {
0% { transform: rotate(180deg) scale3D(.65); }
25% { transform: rotate(180deg) scale3D(.7375); }
50% { transform: rotate(180deg) scale3D(.825); }
75% { transform: rotate(180deg) scale3D(.9125); }
100% { transform: rotate(180deg) scale3D(1); }
}
.circle-bg--2 {
min-width: 1500px;
min-height: 1500px;
// animation: circle-bg--2 1500ms linear both 2000ms;
animation-name: circle-bg--2;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes circle-bg--2 {
0% { transform: translate3D(0, 0, -3000px); }
25% { transform: translate3D(0, 0, -2250px); }
50% { transform: translate3D(0, 0, -1500px); }
75% { transform: translate3D(0, 0, -750px); }
100% { transform: translate3D(0, 0, 0px); }
}
///////////////////////////// STARS & CONFETTI
.stars {
// animation: stars 1500ms linear both 2000ms;
animation-name: stars;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes stars {
0% { transform: translateZ(-500px); }
100% { transform: translateZ(500px); }
}
.confetti {
width: 50px;
height: 50px;
top: 120px;
left: 250px;
// animation: confetti 1500ms linear both 2000ms;
animation-name: confetti;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes confetti {
0% { transform: translateZ(-500px); filter: blur(0px); }
100% { transform: translateZ(500px); filter: blur(2px); }
}
.confetti--2 {
width: 100px;
height: 100px;
top: 480px;
left: 20px;
// animation: confetti--2 1500ms linear both 2000ms;
animation-name: confetti--2;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes confetti--2 {
0% { transform: skew(-20deg, 10deg) translateZ(-500px); filter: blur(0px); }
100% { transform: skew(-20deg, 10deg) translateZ(500px); filter: blur(2px); }
}
///////////////////////////// COINS
#mixin all-coins {
width: 100px;
height: 100px;
}
.coin-diamond {
#include all-coins;
top: 330px;
left: 180px;
// animation: coin-diamond 1500ms linear both 2000ms;
animation-name: coin-diamond;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes coin-diamond {
0% { transform: rotate(-45deg) translateZ(100px); filter: blur(0px); }
100% { transform: rotate(20deg) translateZ(1100px); filter: blur(5px); }
}
.coin-gold {
#include all-coins;
top: 300px;
left: 50px;
// animation: coin-gold 1500ms linear both 2000ms;
animation-name: coin-gold;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes coin-gold {
0% { transform: rotate(20deg) translateZ(-100px); filter: blur(0px); }
100% { transform: rotate(-40deg) translateZ(900px); filter: blur(4px); }
}
.coin-platinum {
#include all-coins;
top: 220px;
left: 200px;
// animation: coin-platinum 1500ms linear both 2000ms;
animation-name: coin-platinum;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes coin-platinum {
0% { transform: rotate(20deg) translateZ(-300px); filter: blur(0px); }
100% { transform: rotate(60deg) translateZ(700px); filter: blur(3px); }
}
.coin-silver {
#include all-coins;
top: 180px;
left: 50px;
// animation: coin-silver 1500ms linear both 2000ms;
animation-name: coin-silver;
animation-duration: 1500ms;
animation-timing-function: linear;
animation-delay: 2000ms;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
#keyframes coin-silver {
0% { transform: rotate(0deg) translateZ(-500px); filter: blur(0px); }
100% { transform: rotate(60deg) translateZ(500px); filter: blur(2px); }
}
}
</style>
`
I've tried to optimize by adding several trick code:
display block on all
not using shorthand animation
using class animation paused until img #load is true
have tried to use will-change, but later deleted it since somebody said it's better to be used in JS - now using translate3D and scale3D (on some, haven't changed the rest of the code)
using more than 2 keyframes (on some, haven't changed the rest of the code)
btw all assets are compressed under 100kb
I suspect is the blur animation, filter blur is a GPU destroyer when you abuse of that. Hope it helps!
enter image description here
CSS code(below):
.navigation-list a:before , .navigation-list a:after {
position:inherit;
top:inherit ;
width:fit-content;
height: fit-content;
border: 4px solid #ABC9FF;
transform: translateX(-50%) translateY(-50%) scale(0.8);
border-radius: 45%;
background: transparent;
content: "";
opacity: 0;
transition: all 0.4s;
z-index: -1;
}
.navigation-list a:after {
border-width: 2px;
transition: all 0.5s;
}
.navigation-list a:hover:before {
opacity: 1;
transform:translateX(-50%) translateY(-50%) scale(1);
}
.navigation-list a:hover:after {
opacity: 1;
transform:translateX(-50%) translateY(-50%) scale(1.3);
}
Summarized, my animation consists of two circles to the sides, 2hich is not what I expected. Would anyone know what is missing or what can I change to have a Circle appearing in the back as the mouse hovers any anchor element in the navbar.
Vue.js v2.2.1
JSFiddle: https://jsfiddle.net/loop_/59g7w1pa/8/
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-to, .fade-leave {
opacity: 0.5;
}
".fade-enter-to, .fade-leave" are supposed to set the state after transition, but not working as expected.
Expected:
Smooth transition from "opacity 0" to "opacity 0.5"
Actual:
Smooth transition from "opacity 0" until "opacity 0.5", then suddenly jump to "opacity 1"
Transition classes are removed and the transition does not have a proper easing, you should add transition property to .square class.
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to,
.fade-leave {
opacity: .5;
}
.square {
margin-top: 2rem;
height: 10rem;
width: 10rem;
background-color: #000;
transition: opacity .5s linear;
}
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;
}
}
}