fade

Vue中使用animate.css库

由 孤者浪人 提交于 2019-12-02 21:55:39
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中使用animate.css库</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="stylesheet" type="text/css" href="css/animate.css" /> <style type="text/css"> @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .fade-enter-active { transform-origin: left center; animation: bounce-in 1s; } .fade-leave-active { transform-origin: left center; animation: bounce-in 1s reverse; } .active { transform-origin: left center; animation: bounce-in 1s; } .leave

Change background color every 30s (fade transition)

由 匆匆过客 提交于 2019-12-02 20:58:45
I would like someone to tell me what's the code for making a webpage background color (the background color of the whole page) to change (fade transition) every 30s to a given color variety. Is it simple? I guess css will make it easier? I've searched over the internet and I only found gradients which is not what I want. Thank you in advance. I 've search codepen and jsfiffle for examples but no one had something that simple :/ Example: While browsing my page I want the background color to change from blue to green and then to orange and again blue and so on so on... :) Here's a jQuery

iOS SDWebImage fade in new image

由 て烟熏妆下的殇ゞ 提交于 2019-12-02 17:19:42
I've been using SDWebImage on my iPhone app to handle all of the image loading. I am using a placeholder image, and I want to crossfade or fade in the new image once it loads. I am using a success block to set the image, and it is working great. No matter what I try, the image will not fade in though. I've tried sending the animation code back to the main thread, but that didn't help either. It just loads instantly... No animation. Here is my code. Any thoughts? // load placeholder image NSURL *url = ... _imageView = [[UIImageView alloc] init]; [_imageView setImage:[UIImage imageNamed:@

Vue.js page transition fade effect with vue-router

由 北战南征 提交于 2019-12-02 16:21:45
How to achieve a fade effect page transition between vue-router defined pages (components)? Wrap <router-view></router-view> with <transition name="fade"></transition> and add these styles: .fade-enter-active, .fade-leave-active { transition-property: opacity; transition-duration: .25s; } .fade-enter-active { transition-delay: .25s; } .fade-enter, .fade-leave-active { opacity: 0 } Detailed answer Assuming you have created your application with vue-cli, e.g.: vue init webpack fadetransition cd fadetransition npm install Install the router: npm i vue-router If you are not developing your app

Modal pop up fade in on open click and fade out on close

由 我的梦境 提交于 2019-12-02 13:58:02
问题 I have a rather simple question for once. I have delete buttons that open modal pop ups to confirm or deny deletion. I would like these modal pop ups to fade in on click and fade out on cancel. I've tried a few different things already, no luck so far. I just need a simple solution. Thanks in advance. Here's my code <style> div.delModal { position:absolute; border:solid 1px black; padding:8px; background-color:white; width:160px; text-align:right } </style> <script> function showModal(id) {

JQuery Animation doesn't work in Internet Explorer

由 拜拜、爱过 提交于 2019-12-02 10:56:43
I'm having a bit of trouble making this JQuery work in Internet Explorer, it works beautifully in FF, WebKit, etc, sliding up, bouncing and falling back into place, but in Internet Explorer it does nothing, the buttons don't work and the content never slides up upon page load. It's really weird, I had an element fade out in an earlier design of my site and it didn't work in IE but worked in everything else... <script> $(document).ready(function(){ $('#homecontent').delay("750").animate({ marginTop: "-15px" }, 1500).animate({ marginTop: "5px" }, 500); }) </script> <script> $("#shop").click

How to fade in UI image in Unity

由 若如初见. 提交于 2019-12-02 10:38:16
I want to fadein a UI image from transparent(alpha=0) to alpha=1, i thought my approach should be right, but it doesn't work, the image is not changing. This is the code that i tried for doing that: using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class Fadein : MonoBehaviour { public float FadeRate; private Image image; private float targetAlpha; // Use this for initialization void Start() { image = GetComponent<Image>(); Material instantiatedMaterial = Instantiate<Material>(image.material); image.material = instantiatedMaterial;

Jquery change image on rollover with fade

由 早过忘川 提交于 2019-12-02 10:24:00
I'm currently using the script below to change an image on rollover. There are many images that this effect needs to be applied to - each image has its own rollover image. The script works for the rollover, but not for the fade. I've read about using CSS and jquery for the fade effect: http://jqueryfordesigners.com/image-cross-fade-transition/ But it would be a real pain having to write the CSS for over 100 different images! I was just wondering if anyone knows what I'm doing wrong and how to make the script work? :) $(function () { $("img.rollover").hover(function () { this.src = this.src

Multiple Image Fadeout on scroll

由 痞子三分冷 提交于 2019-12-02 08:14:38
I have a onepage and on each navigation point a image in the middle of the site changes color by fading. I managed to fade in with: $("#active3").fadeIn(2000); However I have a issue fading it out again. Let me try to explain: I have 5 Navigation points with 5 different images. If I (for example) scroll from first to third navigation point im gonna have 3 pictures laying over each other since on every navigation point, one picture fades in. If I then jump from third again to the first I have to get the first picture on top somehow ( which wouldn't work for me since z-index can not fade, or? )

Fading in and out divs with css

由 落爺英雄遲暮 提交于 2019-12-02 07:22:09
http://jsfiddle.net/LJdAU/ -o-transition:color .3s ease-out, background .5s ease-in-out; -ms-transition:color .3s ease-out, background .5s ease-in-out; -moz-transition:color .3s ease-out, background .5s ease-in-out; -webkit-transition:color .3s ease-out, background .5s ease-in-out; transition:color .3s ease-out, background .5s ease-in-out; I am trying to fade in and out a div object. See the fiddle. I made the fade especially long to see the problem. The menu items (canada, germany, etc) on rollover works fine (that is fades in) , but on rollout it does not fade out. can someone spot the error
订阅 fade