So I have this component where it is supposed to be set to display none after the animation but i cant seem to find it in the docs nor find other questions regarding thjis.
I've temporary solved it by nesting it on another motion.div and animate the display with delay set to match the supposed outro (opacity to 0)
Edit: I've edited some part of the code here. But anyways this one is just a supposedly a temporary solution, I still want to know if there are more and better ways to do it.
<motion.div
initial={{display:'flex'}}
animate={{display:'none'}}
transition={{delay:3.3}}
>
<motion.div
initial={{opacity: 1}}
animate={{opacity: 0,}}
transition={{delay:3, duration: 0.3,}}
transitionEnd: { display: "none" }
From this weirdly-named section of the docs:
Related
I have an extension of Color that stores a colour variable. I am currently using this to set the main colour for the whole app, which currently works.
extension Color{ static var colour: Color = Color.red }
If I set it to red everything turns red. But at the moment I have to hard code what colour it will be. I want to be able to modify this colour during runtime.
I have tried to modify the extension at runtime but I can’t seem to get it working and I’m not sure if it allows you to do this. I’m not sure the best way to approach this.
If anyone has anyway of changing the variable in an extension that would be ideal but if there’s another way, any help would be greatly appreciated. If you have any questions or I haven’t explained something clearly ask away.
Thanks so much
I have 6 images inside my slick carousel. They take full width space of the screen but they don't repeat infinitely. To explain it further I mean that I want to use only 6 images and if they skip to the left overtime then they will appear from the right once again and again (They will keep repeating)
Are you using bootstrap by any chance? because it has a built in carousel that can infinitely slide. Check out their code and see if you can imitate their logic.
https://getbootstrap.com/examples/carousel/
Edit**
after looking further into it, does this help?
$('.multiple-items').slick({
infinite: true,
});
referenced from: http://kenwheeler.github.io/slick/
I haven't used slick before, but I believe you can set its' infinite property to true. Let me know if that works!
in this fiddle the 'slidesToShow' is 6, so please make sure that your owl item is more than slidesToSwow count. So it will automatically working infinite loop option.
Please visit fiddle
I started using asp.net MVC 4 and I don't quite understand how could I accomplish simple tasks like making a simple navigation menu for my website, I would like it to be just like the one here on stackoverflow where the images change on mouse over and also link to their corresponding pages.
what used to be a few minutes of work with HTML (in Dreamweaver for example) now takes much much more time and thought (at least for me).
Investigating about the 3 elements I've mentioned got me here:
How to show an image- even that is not easy, I have looked everywhere for something that looks like an ideal solution but couldn't find any! even here on stackoverflow, some solutions are involving writing long lines of code in the name of "Helpers", and I could dig into it but there are so many different solutions, and I wouldn't know which one is right.. why can't there be just one standardized solution?
How to link an image- also an issue, that i understand that I need to set the controller in the parameters list but again I ran into and issue that I might have found the solution for I just need to test it, I have read that I could have different methods inside of one controller and in this way I will not have to have one controller for each link. I will try that, better solutions are welcomed.
How to swap an image on mouse over- also looks crazy for me, I have found one solution where there are long lines of code for this here: http://www.codeproject.com/Tips/329596/MVC-3-Helper-for-Hover-Images
I am kind of disappointed that just for putting up the logo image and linking it I spend days! I do have background in .net c# HTML+CSS etc'.. so I am asking myself (and you guys) why does it have to be so unclear and not friendly?
Come on.. what am I missing? is there any library of helpers everybody is using or something like that?
I am still in the process of learning MVC 4 and I know I'll get it but I would've expected accomplishing these kind of simple tasks a lot faster.
also, in Microsoft examples, I have never found an example where they put a logo or a menu image, it is always plain text! so annoying and frustrating...
I will very much appreciate any help..
Thanks a lot!
Roy.
Start with http://www.asp.net/mvc/mvc3 and understand what are the paradigms of it and what is the differance between webform and mvc systesm.
Basically you need to understand how the masterpages are evolved in mvc or what is the replacement of master pages in mvc.
This is clue to what you want to achieve.
Now if you want to put the Image button in which if you hover and color will change then you need to do following steps.
Create a button first e.g
Html.ActionLink("YourButtonName", "Index", null, new
{#class="hoverButton" })
Now you need to create two classes in your css file with name hoverButton which contains property to show image and hoverButton:hover show image when you hover over the link. Like following.
hoverButton {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('Button.png') center top no-repeat;
}
.hoverButton:hover {
background-image: url('hoverButton.png');
}
This way when you hover over to button it will display different image in mvc view menu item.
Hope you understand the concept and it helps.
I'm trying to animate text with RaphaelJS, but I'm encountering a choppy animation ("judder"?). I've looked around for other issues regarding this, but I've only been able to find jQuery-specific or non-SVG topics so far. Please let me know if I overlooked a similar question!
Essentially, I'm attempting to visually wrap a text element in a rect element and translate them simultaneously through an animation. I know about the 'g' element, but I don't want to use it since older versions of Internet Explorer don't support it. Instead, I'm using separate Raphael animations for the text and the rectangle:
var raphRect = paper.rect(
(paperWidth/2)-rectWidth/2
,paperHeight-rectHeight
,rectWidth
,rectHeight
,rectHeight/2
)
...
,raphText1 = paper.text(
paperWidth/2
,paperHeight-(2*fontSize)
,'this is jumpy text?'
)
...
raphRect.animate({y : -rectHeight}, risingTime, 'linear');
raphText1.animate({y : -2*fontSize}, risingTime, 'linear');
I'm assuming that the judder is caused by rounding pixels in each animation frame for the text element. Is there any way to mitigate or prevent this judder? (Reducing the animation time is not an option...and it doesn't even look like it helps.)
(I have an example of what I'm trying to do here. I've included two lines of text and a bold stroke for the rect to emphasize the judder.)
I had the same problem and have tried to differentways to solve it. I have found few hacks that works for me. But they all have the same idea: you should make text not so straight.
"transform" : "R 0.01"
For example, it rotates your text on small angle. Here is the result:
jsfiddle.
I can't garantue that it will work in your browser. In stable Chrome 36 it works good, in beta or canary worse.
You could also try no so straigth font jsfiddle. It works good for FF.
"font-family" : "Comic Sans MS"
Other things worse to be tried:
inreasing font size
using bold font
using a text path
This idea is actually borrowed from Robert Longson's information about the text-rendering property. It's true that Raphael doesn't provide direct access to this functionality, but it does provide you with a link to the dom node -- so it is but a second step to apply this style yourself, and it does indeed produce better results in Firefox at least.
Using jquery:
$(raphText1.node).attr( 'text-rendering', 'geometricPrecision' );
$(raphText2.node).attr( 'text-rendering', 'geometricPrecision' );
Staged here.
I have my site created with Dashcode and I am using the List object but I don't like the default blue background when a cell is selected.
How can I customize this? For example change it to grey or white, etc.
(As far as i know, everything is customizable in Dashcode, is just sometimes you have to do it using code and not Dashcode UI.)
Thanks in advance.
Answer to my self:
looking at main.css I found something like:
.listRowTemplate_template.selected {
background-color: rgb(56, 0, 217);
}
Which is the color I want to change ;)
Which would have been my answer, shall i vote you up? ;-)
It is easy to forget that when in Dashcode it is "just" JavaScript, CSS and HTML and so many problems will often succumb to those type of solutions such as you have done.