I want to scale the GatsbyImage whenever I hover a specific content , I am using this code to fetch multiple articles , and I want to hover them independently .
{blog.data.blogs.map((ts)=>
(
<Blog to={`article/${ts.blog.document.uid}`}>
<GatsbyImage image={ts.blog.document.data.post_img.gatsbyImageData} alt='Blog' />
<BlogTitle>
{ts.blog.document.data.post_title.text}
</BlogTitle>
<BlogParagraph>
{ts.blog.document.data.post_paragraph.text}
</BlogParagraph>
How can I hover each article independently , and make the image scale if so ?
It depends on what kind of styling are you applying but you can simply do:
<GatsbyImage image={ts.blog.document.data.post_img.gatsbyImageData} alt='Blog' className="some_fancy_classname" />
Then:
.some_fancy_classname:hover {
transition: transform .3s;
transform:scale(1.05);
}
Keep in mind that depending on your JSX/HTML structure, you may need to point to another element rather than .some_fancy_classname:hover to scale the image, for example:
.some_fancy_classname:hover img {
transition: transform .3s;
transform:scale(1.05);
}
Related
I want to create a smooth transition between 2 images with a legend.
The images come from an object-array of images.
Because works only on single tags and components, I've created a component to define the image+legend.
<transition>
<home-image :slide="slide" :key="slide"></home-image>
</transition>
The classes I define are like this
.v-enter-active,
.v-leave-active {
transition: opacity 2s ease-in-out;
}
.v-leave,
.v-enter-to {
opacity: 1;
}
.v-enter,
.v-leave-to {
opacity: 0;
}
The new image is returned by a method
updateSlide() {
this.slide = this.entries[ Math.floor( Math.random() * this.entries.length ) ];
}
where entries is my array defined in data
this.slide is updated in regular intervals, every 10seconds like this, which is defined in the created() section
this.updateSlide();
this.uSlide = setInterval( this.updateSlide, 10000);
The code works, in the sense that a new image is loaded in this.slide every 10 seconds.
However, the transitions work only "half-way".
There is no transition fading out: the "old image" disappears and makes way for the new image fading in.
However, what I'd like is a smooth transition from one to the other.
I've tried more than a couple of ideas including using mode="out-in" and "in-out" but nothing works as I want.
What am I overlooking?
I use "vuex-module-decorators" and dynamically determine the style in this getter:
<div class="viewport":style="viewportStyleVars">...</div>
get viewportStyleVars() {
const tx = -this.viewportRect.x;
const ty = -this.viewportRect.y;
return {
'--translate-x': `${tx}px`,
'--translate-y': `${ty}px`,
}
}
How to make change happen smoothly, not instantly?
I would be grateful for the hints, I am not familiar with the animation.
You just need to add transition in CSS to the div with class .viewport something like:
.viewport{
transition: all 1s linear;
}
The 1s in the transition, is the time, that the action will take, you can tweak this value to something smaller, like 0.1s, if that suits you better.
I have 3 components which I want to show a transition effect when they enter/leave.
There's 1 "main" component and the 2 others show up when you press the associated button. My current sample code is here: https://jsfiddle.net/5aq1k05L/
<transition :name="'step_' + currentView" mode="out-in">
<component :is="currentView"></component>
</transition>
CSS:
.step_componentA-enter-active {
transition: transform 0.4s;
}
.step_componentA-leave-active {
transition: transform 0s;
}
.step_componentA-enter {
transform: translateX(-100%);
}
.step_mainComponent-leave-active {
transition: transform 0.3s;
}
.step_mainComponent-leave-to {
transform: translateX(-100%);
}
.step_componentB-enter-active {
transition: transform 0.4s;
}
.step_componentB-leave-active {
transition: transform 0s;
}
.step_componentB-enter {
transform: translateX(100%);
}
What I am trying to do:
When I click on the "componentA" button, I want that component to slide from the left while "mainComponent" is still visible in the background (not stripped out of elements like now) during the transition.
Same thing for "componentB", except it will slide from the right, and will back to the right when clicking back.
What am I missing? https://jsfiddle.net/5aq1k05L/
Edit 2:
Here a working example with the componentA and componentB that are sliding over the mainComponent -> https://jsfiddle.net/5aq1k05L/8/
I changed the transition to mode:in-out, I added a z-index for each component, and put the components in position:absolute and the app in position:relative
Edit:
Here a working example for your case -> https://jsfiddle.net/5aq1k05L/4/
When you analyse the script step by step, you see that the class when the componentB is leaving is step_mainComponent-leave-active step_mainComponent-leave-to that it makes a classic toggle relative to the mainComponent style.
If you want to use different animations, you should use enter-active-class and leave-active-class etc (see more here) - or put two vars in name, i guess, with a dynamic value relative to the previous view, in the store like currentView is.
It could be like this :
<transition
:name="'step_' + currentView + '_from_' + prevView"
mode="out-in"
>
In the store (you ll need to update the states, mapState, etc.. as well too) :
SET_CURRENT_VIEW(state, new_currentView) {
state.prevView = state.currentView;
state.currentView = new_currentView;
}
Hope it ll help you
I have a text that is centered. it's replaced every 4 seconds.
I want that when a text is displayed: it will come from the right (opacity=0) to the center (opacity=1),
and when the text is hidden, it will go from the center (opacity=1) to the left (opacity=0).
This is what I tried:
.fade.ng-enter {
transition:0.5s ease-out all;
opacity:0;
}
.fade.ng-enter.ng-enter-active {
opacity:1;
}
.fade.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.fade.ng-leave.ng-leave-active {
opacity:0;
}
This is my codepen:
https://codepen.io/anon/pen/jwNomv
Any help appreciated!
You don't have dependency on ng-animate. And even if you did, it won't work, because ng-animate supports directives like ng-view, ng-show, ng-hide, ng-repeat.
What you are doing is simply changing the visible text. You need to make use of either of these directives to make ng-animate work.
Instead, if you want it to work, you will have to add these classes yourself, and it can be done using JQlite API, you can make use of addClass(), removeClass() and toggleClass().
var element = angular.element( 'id' );
/** Use timeouts to clearly decide when an element at which state. */
element.addClass( 'ng-enter' );
An another solution using KeyFrames has been implemented here.
You should use webkit animation. you can find more info at https://www.w3schools.com/css/css3_animations.asp
I want to use multiple classes to optionally add transitions. Instead of stacking, the previous is getting overridden.
.container { transition: margin .2s; }
.container.t-padding { transition: padding .2s; }
The problem: Property is overridden rather than stacking
http://jsfiddle.net/yz2J8/2/ (The problem)
My temporary solution: Add the previous transition to the rule
.container { transition: margin .2s; }
.container.t-padding { transition: padding .2s, margin .2s; }
http://jsfiddle.net/ZfQcp/6/ (My temporary solution)
What's a better solution??
How can I avoid having to create tons of rules to combine these?
JavaScript could be a cleaner solution as you only need to have 1 CSS rule (the original rule).
If you know the position of you're rule you can do the following.
//First Save The Original Rule
var originalRule = document.styleSheets[0].cssRules[3].cssText;
//Save also the original Hover Rule
var originalHover = document.styleSheets[0].cssRules[4].cssText;
Now originalRule will contain this:
.container{
...
transition: margin .2s;
...
}
And originalHover will contain this:
.container:hover{
...
margin: 10px 0;
...
}
to simply add another transition effect, you can do the following.
document.styleSheets[0].cssRules[3].style.transitionProperty += ",background-color";
document.styleSheets[0].cssRules[4].style.transitionDuration += ",1s";
At this stage, both transitions will take effect.
If you want to only have the original transition, you can either add it manually or simply...
//Delete the Rule
document.styleSheets[0].deleteRule(3);
//Add the Original Rule Back Again
document.styleSheets[0].insertRule(originalRule,3);
If you do so, only the original transition (margin) will take effect, don't forget to also replace the originalHover rule to remove any other effects on hover.
Note:
For Chrome
document.styleSheets[0].cssRules[3].style.webkitTransitionProperty
For Firefox
document.styleSheets[0].cssRules[3].style.mozTransitionProperty
For IE
insertRule and deleteRule do not work, there's these ones instead:
addRule , removeRule
LIVE DEMO FOR CHROME AND FIREFOX