Блог

Я использую меню в своем приложении ionic, которое использует анимацию CSS. Когда страница загружается изначально, анимация меню работает нормально. Если я перехожу по ссылке, а затем возвращаюсь на страницу меню, анимация не работает. Я использую NavController push для перемещения между разными страницами. Может ли то, как вызывается страница, приводить к тому, что анимации CSS не загружаются?

HTML

 <ion-content class="bg-style" padding>

<div class="menu">
  <input type="checkbox" id="toggle" />
  <label id="show-menu" for="toggle">
    <div class="btn">
      <i class="material-icons md-36 toggleBtn menuBtn">menu</i>
      <i class="material-icons md-36 toggleBtn closeBtn">close</i>
    </div>
    <div class="btn" (click)="search()" tappable>
      <i class="material-icons md-36">search</i>
      <p>Search</p>
    </div>

    <div class="btn" (click)="account()" tappable>
      <i class="material-icons md-36">account_box</i>
      <p>Account</p>      
    </div>
    
    <div class="btn" (click)="login()" tappable>
      <i class="material-icons md-36">login</i>
      <p>Login/Join</p>   
    </div>

    <div class="btn" (click)="logout()" tappable>
      <i class="material-icons md-36">logout</i>
      <p>Logout</p>   
    </div>      

  </label>
</div>
</ion-content>
 

.TS

 @IonicPage()
@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html',
})
export class DashboardPage implements OnInit {
    
  logo = 'assets/img/fixmyhomelogo.png';
  isLoggedIn: boolean;  

  constructor(public navCtrl: NavController, public afAuth: AngularFireAuth,public navParams: NavParams, private auth: AuthenticateProvider, public globe: GlobalProvider) {
      
  }
  
  ngOnInit() 
  {}    

  ionViewDidLoad() {
    console.log('ionViewDidLoad DashboardPage');
  }
  
  search()
  {
     this.navCtrl.push("SearchPage");
  }

  account()
  {
      this.navCtrl.push("MyaccountPage");   
  }

  login()
  {
      //console.log('login');
      this.navCtrl.push("UserloginPage");
      
  }

  
  logout()
  {
      this.auth.userlogOut();
      this.navCtrl.push("DashboardPage");   
  }
 

SCSS

 page-dashboard {
   .bg-style {
        background: #ffffff;
    }

    input {position: absolute; display: none}

    * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .menu {
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;
    }

    .btn {
      width: 110px;
      height: 110px;
      border-radius: 110px;
      position: absolute;
      overflow: hidden;
      cursor: pointer;
    }

    .material-icons.md-36 { font-size: 36px; color: #1ed12e }

    .btn {
      background: #ffffff;
      font-size: 13px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      
      -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }

    .btn:not(:first-child) {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      z-index: -2;
      
      -webkit-transition: all 0.6s cubic-bezier(.87,-.41,.19,1.44);
      transition: all 0.6s cubic-bezier(.87,-.41,.19,1.44);
    }

    .btn:nth-child(2) {top:0px;-webkit-transition-delay: 0s;transition-delay: 0s}
    .btn:nth-child(3) {top:0px;left:0px;-webkit-transition-delay: 0.1s;transition-delay: 0.1s}
    .btn:nth-child(4) {left:0px;;-webkit-transition-delay: 0.2s;;transition-delay: 0.2s}
    .btn:nth-child(5) {top:0px;left:0px;-webkit-transition-delay: 0.3s;transition-delay: 0.3s}
    .btn:nth-child(6) {top:0px;-webkit-transition-delay: 0.4s;transition-delay: 0.4s}
    .btn:nth-child(7) {top:0px;left:0px;-webkit-transition-delay: 0.5s;transition-delay: 0.5s}
    .btn:nth-child(8) {left:0px;-webkit-transition-delay: 0.6s;transition-delay: 0.6s}
    .btn:nth-child(9) {top:0px;left:0px;-webkit-transition-delay: 0.7s;transition-delay: 0.7s}

    input#toggle:checked ~ #show-menu .btn:nth-child(2) {
      top:-150px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    input#toggle:checked ~ #show-menu .btn:nth-child(3) {
      top:-100px;left:100px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    input#toggle:checked ~ #show-menu .btn:nth-child(4) {
      left:150px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    input#toggle:checked ~ #show-menu .btn:nth-child(5) {
      top :100px;left:100px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    input#toggle:checked ~ #show-menu .btn:nth-child(6) {
      top:150px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    input#toggle:checked ~ #show-menu .btn:nth-child(7) {
      top:100px;left:-100px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    input#toggle:checked ~ #show-menu .btn:nth-child(8) {
      left:-150px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    input#toggle:checked ~ #show-menu .btn:nth-child(9) {
      top:-100px;left:-100px;opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }

    .menuBtn, .closeBtn {
      position: absolute;
      transition: all 0.3s ease;
    }

    .closeBtn {
      transform: translateY(50px);
      opacity: 0;
    }

    input#toggle:checked ~ #show-menu .btn .menuBtn {
      transform: translateY(-50px);
      opacity: 0;
    }

    input#toggle:checked ~ #show-menu .btn .closeBtn {
      transform: translateY(0px);
      opacity: 1;
    }   
    
}