Using Vue transitions, fade works nicely, though trying to use transform: scale(0) doesn't seem to be happening and causes fade to no longer work. Any ideas?
.fade-enter-active, .fade-leave-active {
transition: all .2s ease-in-out;
transform-origin: center center;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: scale(0);
}
Modal
<transition appear name="fade">
<div class="relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true" #click="$emit('close-modal')">
Test Div
</div>
</transition>
Thanks
Related
i'm tryin to trigger an animation when a dynamic component change but it doesn't work i appreciate any advice, thanks!
Here's my code:
<transition name="fade" mode="out-in">
<keep-alive>
<Component
:is="camposForm[campoActual].componente"
:label="camposForm[campoActual].label"
/>
</keep-alive>
</transition>
<style lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
opacity: 1;
transition: all .9s;
}
.fade-enter, .fade-leave-to {
transform: translateY(3px);
opacity: 0;
}
</style>
I can't get Vue to apply Transition animation effects when changing from one CSS class to another (using V-bind).
I've gone through the Vue documentation but none of the examples work for my use case. I basically want the DIV to transition by fading nicely from full screen to "regular size" by toggling.
Please see Fiddle at https://jsfiddle.net/luckman8/892ktedz/
`
<div v-bind:class="{'fullscreen':isFullScreen, 'regularSize':!isFullScreen}">
<button type="button" #click="toggle">
Toggle
</button>
<p>
{{isFullScreen}}
</p>
</div>
`
The CSS:
.fade-enter-active, .fade-leave-active {
transition: opacity 3s ease-out;
}
.fade-enter, .fade-leave-to {
opacity: 0.1;
}
.regularSize
{
width: "50%";
height: "50%";
background-color: "green";
}
.fullscreen
{
display: flex;
flex-direction: column;
position: fixed;
background-color:blue;
top:0;
left:0;
width: 100%;
height: 100%;
flex-basis:10%;
overflow-y:hidden;
}
The Vue code:
new Vue({
el: "#app",
data: {
isFullScreen:false
},
methods: {
toggle()
{
this.isFullScreen = !this.isFullScreen
}
}
})
Thank you in advance!
The <transition> effects will only work for elements that change their visibility. So for example by using v-if.
So you have two options.
Either add a v-if logic to your template.
For example: (a quick mock up. could be refactored to be cleaner)
<div id="app">
<button type="button" #click="toggle">
Toggle
</button>
<transition name="fade">
<div
v-if="isFullScreen"
v-bind:class="{
'fullscreen':isFullScreen,
'regularSize':!isFullScreen
}">
<p>FULL SCREEN</p>
<button type="button" #click="toggle">
Toggle
</button>
</div>
</transition>
<transition name="fade">
<div
v-if="!isFullScreen"
v-bind:class="{
'fullscreen':isFullScreen,
'regularSize':!isFullScreen
}">
<p>SMALL SCREEN</p>
</div>
</transition>
</div>
Create the transition effect purely with css.
I have html this is basically like this:
<span>
<input name="checked_field" type="text" />
<p class="has-warning danger" style="display:none;">{{ error.first() }}</p>
</span>
The display:none is added by JavaScript at load time. It is removed if the user types an invalid value in checked_field.
Since the framework controls visibility by simply removing style="display:none;", I am wondering: Is it possible to transition the height and visibility by pure CSS rules when display:none is removed via JavaScript? Again, given that I'm not able to add a 2nd class, but am stuck with the JavaScript framework removing a style.
We can achieve this by overriding the display:none property.
.has-warning, .has-warning[style*='display:none'] {
transition: all 1s;
display: block !important;
height: 0;
opacity: 0;
}
.has-warning:not([style*='display:none']) {
height: 50px;
opacity: 1;
}
Here's a JS Fiddle: https://jsfiddle.net/eywraw8t/165903/
WARNING! CSS will see display:none as different from display: none (space in between) so if it doesn't work at first, check this.
it really easy
const dropDownSubInput = ref(false) //nuxt 3
.subForm {
width: inherit;
max-height: 0;
opacity: 0;
overflow-y: hidden;
transition: all .2s ease;
}
.formActive {
.form {
box-shadow: 0 41px 36px rgba(0, 0, 0, 0.2);
.subForm {
max-height: 1000px !important;
opacity: 1 !important;
}
}
}
<div class="formSection" :class="dropDownSubInput ? 'formActive' : ''">
<div class="form">
<form #submit.prevent>
<input type="text"
placeholder="Введите слово или название"
v-model="searchInput"
#click="dropDownSubInput = true"
/>
<font-awesome-icon :icon="['fas', 'fa-magnifying-glass']"/>
</form>
<div class="subForm">
</div>
</div>
</div>
I'd like to ask if it's possible to keep the same background image while sliding on my webpage (using the image icons).
I wanted to keep the background from the mainpage (somehow fix it there) and just make the content 'slide on it'. I used this jquery - javascript method to make the slides.
Used these old jquery function for the sliding:
/* jQuery.ScrollTo
/* jQuery.LocalScroll
/* Fire Horizontal Scroll */
(full code is on the linked page)
The 9 'slides' are put in a wrap. The first one is the mainpage.
<body>
<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p> « HOME </div>
<div id="three"><p>THREE</p> « HOME </div>
<div id="four"><p>FOUR</p> « HOME </div>
<div id="five"><p>FIVE</p> « HOME </div>
<div id="six"><p>SIX</p> « HOME </div>
<div id="seven"><p>SEVEN</p> « HOME </div>
<div id="eight"><p>EIGHT</p> « HOME </div>
<div id="nine"><p>NINE</p> « HOME </div>
</div>
Here is the interesting part of the css
#wrap {
min-height: 100%;
width: 900%;
overflow: hidden;
}
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
width: 11.1%;
float: left;
text-align: center;
}
* html {background:url(images/mainfull.jpg)}
* html #full {height:100%;}
Thanks for help
[SOLVED] All you have to do is change the background position to fixed instead of absolute.
.background-image {
background: url(images/mainfull.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-animation-name: fade-in;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 3s;
-moz-animation-name: fade-in;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-moz-animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-animation-fill-mode: forwards;
background-image: url('images/mainfull.jpg');
background-position: center center fixed;
background-repeat: no-repeat;
}
I am trying to get the footer animation to come in one right after another. It works fine in everything but Safari where they all come it at once. Any ideas on what to add?
The site is: http://inventivewebdesign.com/ndr/
HTML
<div id="ftr-tagline">
<div class="slideLeft" id="ftr1-animation">
<div class="one-third first">
<div class="one-call">
One Call...
</div><!-- .one-call -->
</div><!-- .one-third -->
</div><!-- #ftr1-animation -->
<div class="slideLeft" id="ftr2-animation">
<div class="one-third">
<div class="one-contact">
One Contact...
</div><!-- .one-contact -->
</div><!-- .one-third -->
</div><!-- #ftr2-animation -->
<div class="slideLeft" id="ftr3-animation">
<div class="one-third last">
<div class="one-culture">
One Culture...
</div> <!-- .one-contact -->
</div><!-- .one-third -->
</div> <!-- #ftr3-animation -->
</div>
CSS
/*
==============================================
slideLeft
==============================================
*/
.page-id-4 #ftr1-animation, .page-id-4 #ftr2-animation, .page-id-4 #ftr3-animation{
visibility: hidden;
}
.page-id-4 .slideLeft{
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
/* Keep animation visible after animation finishes */
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes slideLeft {
0% {transform: translateX(150%);}
100% {transform: translateX(0%);
visibility: visible;}
}
#-webkit-keyframes slideLeft {
0% {-webkit-transform: translateX(150%);}
100% {-webkit-transform: translateX(0%);
visibility: visible;}
}
.page-id-4 #ftr1-animation{
-webkit-animation-delay: 2s; /* Safari and Chrome */
animation-delay: 2s;
}
.page-id-4 #ftr2-animation{
-webkit-animation-delay: 3s; /* Safari and Chrome */
animation-delay: 3s;
}
.page-id-4 #ftr3-animation{
-webkit-animation-delay: 4s; /* Safari and Chrome */
animation-delay: 4s;
}
This question is old, but I'm assuming you were running iOS 7.X.X and therefore Safari of the same version. It seems that that version of Safari blocked animation execution until the user lifted their finger off the page.
I just ran into an issue where my animations weren't being fired in Safari 7.X.X until after the user lifted their finger from scrolling. iOS/Safari 8.X.X had no such issues and fired off animations as expected.