Interazione di Meteor con JQuery o Animazione in generale

Fondamentalmente, sto costruendo un'app in Meteor, e ho la barra di navigazione sinistra in un position: fixed; e left : -300px e voglio farlo scorrere su left : 300px, ma non ho idea di come animare una transizione in Meteor (in qualche modo la transizione della diapositiva in jquery). Capisco l'aspetto base di JQuery della cosa, ma per qualche ragione, non sembra funzionare quando lo metto sotto l'aspetto di Meteor.isClient dello script. Tenete a mente, sono abbastanza nuovo per Meteor, il codice javascript incluso sarebbe molto apprezzato.Interazione di Meteor con JQuery o Animazione in generale

Il mio codice corrente è il seguente.

HTML

<body> 
    <div class='topmenu'> 
     <div class='menubutton'> 
      <span class="icon-bar1"></span> 
      <span class="icon-bar2"></span> 
      <span class="icon-bar3"></span> 
      <!--Needs to be fixed so that we only need to use one icon-bar class!!!--> 
     </div> 
     <div class='BanditDiv'> 
      <h1 class='BanditName'>Bandit</h1> 
     </div> 
    </div> 
    <div class='leftnav'> 
     <div class='sitenav'> 
      <a class='internalnav' href="#">Home</a> 
      <a class='internalnav' href="#">Musicians</a> 
      <a class='internalnav' href="#">Recording Space</a> 
     </div> 
    </div> 
    <div class='main'> 
    </div> 
</body>

CSS

body{ 
    margin: 0px 0px 0px 0px;  
} 

.navitem:hover{ 
    background-color: #000066; 
} 

.main{ 
    background-color: rgb(128,128,128); 
    height: 200vh; 
    width: 100vw; 
    margin: 0px 0px 0px 0px; 
    overflow-x:hidden; 
} 

.topmenu{ 
    position: fixed; 
    z-index: 10; 
    top: 0px; 
    width: 100vw; 
    height: 50px; 
    background: white; 
    border-bottom: 2px lightgray solid; 
} 

.BanditDiv{ 
    position: fixed; 
    top: 0px; 
    height: 50px; 
    width: 30vw; 
    margin-left: 35vw; 
    float: center; 
} 

.BanditName{ 
    text-align: center; 
    font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif; 
    color: #000066; 
} 

.menubutton{ 
    position: fixed; 
    top: 5px; 
    left: 5px; 
    height: 40px; 
    width: 40px; 
    border: 1px #cccccc solid; 
    background-color: white; 
    border-radius: 5px; 
} 

.menubutton:focus{ 
    outline: 0; 
} 

.icon-bar1 { 
    position: fixed; 
    top: 15px; 
    left: 10px; 
    margin: 0px 0px 0px 0px; 
    display: block; 
    width: 30px; 
    height: 2px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

.icon-bar2 { 
    position: fixed; 
    top: 25px; 
    left: 10px; 
    margin: 0px 0px 0px 0px; 
    display: block; 
    width: 30px; 
    height: 2px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

.icon-bar3 { 
    position: fixed; 
    top: 35px; 
    left: 10px; 
    margin: 0px 0px 0px 0px; 
    display: block; 
    width: 30px; 
    height: 2px; 
    background-color: #cccccc; 
    border-radius: 1px; 
} 

.leftnav{ 
    position: fixed; 
    top: 0px; 
    left: -300px; 
    width: 300px; 
    height: 100vh; 
    z-index: 9001; 
    background-color: yellow; 
}

fonte

2016-01-28 Stephan Ng

Che aspetto ha il tuo JS al momento e come si sta comportando il tuo codice al momento? –

L'ho davvero fatto funzionare! Sembra che fosse a causa della mia mancanza di uso di angolari o modelli. Grazie per la preoccupazione però! –

Se hai funzionato, per favore pubblica la tua risposta. La tua domanda è stata pubblicizzata in modo così chiaro che le persone sono curiose di questo argomento. –

Quindi questo è ciò che mi si avvicinò con la soluzione che sembrava funzionare. Ho creato un modulo angolare all'interno di Meteor.isClient e sembrava funzionare bene.

if (Meteor.isClient) { 
    angular.module('sidebar',['angular-meteor']); 

    angular.module('sidebar').controller('SidebarCtrl', ['$scope', 
    function ($scope) { 
     function Menu (callback){ 
     $('.menubutton').on('click', function(){ 
      $('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"}); 
      $('.leftnav').animate({left : "0px"}, 500, function(){ 
      $('.main').click(function() { 
       $('.leftnav').animate({left: "-302px"}, 500); 
       $('.leftnav').css({"box-shadow" : "none"}); 
      }); 
      $('.leftnav').click(function(event){ 
       event.stopPropagation(); 
      }); 
      }); 
     });  
     } 
     Menu(); 
    }]); 
}

fonte

2016-01-29 23:57:22

Interazione di Meteor con JQuery o Animazione in generale

risposta

Problemi correlati