How to make smooth media-query transition back and forth? -


i've been digging day long , can't make work properly. i'm not coder, maybe that's problem. anyway, i'm trying make logo appear nicely when screen size changes. realize can't display:none; display:block; have tried visibility, opacity , height transition.

if @ code below, you'll see when going larger screen smaller, there's sort of delay appears before fading out, height animation plays. however, if go smaller window larger, transitions 2x faster. i'm not sure how make reverse, animation smooth going , forth. tried play numerous snippets web, nothing let's me control animation properly.

my idea hide logo on mobile devices, when ppl flip tablet, nice transition let logo appear larger screens (and not mobile, re-sizing desktop browser make more professional). hope can help.

.wrapper {  	width: 500px;  	background-color: #0c6;  }  .nav {  	background-color: #69c;  }  .logo {  	max-height: 0px;  	background-color: #fc3;  	  -moz-transition: 1s;    -o-transition: 1s;    -webkit-transition: 1s;    transition: 1s;  	visibility: hidden;  	opacity: 0;  }	  @media screen , (min-width: 500px){  .logo {  	max-height: 200px;  	visibility: visible;  	opacity: 1;  }	  }
<!doctype html>  <html>  <head>  <meta charset="utf-8">  <title>untitled document</title>    </head>    <body>  <div class="wrapper">    <div class="logo">logo<br>      <br>      <br>      <br>    </div>    <div class="nav">nav</div>  </div>  </body>  </html>

you need transition on both ends, , transition value invalid:

.logo {     max-height: 0px;     background-color: #fc3;     -webkit-transition: max-height 1s linear, opacity 1s linear;                -moz-transition: max-height 1s linear, opacity 1s linear;          -o-transition: max-height 1s linear, opacity 1s linear;             transition: max-height 1s linear, opacity 1s linear;     visibility: hidden;     opacity: 0; }     @media screen , (min-width: 500px){     .logo {         max-height: 200px;         visibility: visible;         opacity: 1;         -webkit-transition: max-height 1s linear, opacity 1s linear;            -moz-transition: max-height 1s linear, opacity 1s linear;              -o-transition: max-height 1s linear, opacity 1s linear;                 transition: max-height 1s linear, opacity 1s linear;     }    }

Comments

Post a Comment

Popular posts from this blog

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more