гладкое состояние, вводящее неправильные элементы головы в страницу - PullRequest
0 голосов
/ 02 октября 2018

Проблема

Smoothstate.js сохраняет <head> страницы, на которой я только что находился, и вставляет ее обратно на домашнюю страницу, когда я возвращаюсь к index.html.

Например: я щелкаю ссылку, которая приводит меня к proj1.html Затем я хочу покинуть эту страницу, щелкая ссылку на домашнюю страницу, которая возвращает index.html.Страница возвращается домой, но макет не работает, потому что домашняя страница <head> содержит содержимое <head> из proj1.html. Таким образом, все мои стили нарушаются на домашней странице.

Smoothstate кэширует <head>, и я не уверен, как этого избежать ...

Я пытался использовать метод очистки кэша, но безуспешно.smoothState.clear();

Вот мой JS

$(function(){
  'use strict';
  var $page = $('#main'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 0,
        onStart: {
          duration: 250, // Duration of our animation
          render: function ($container) {
            // Add your CSS animation reversing class
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onStart: {
          duration: 0,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);
          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

1 Ответ

0 голосов
/ 02 октября 2018

Fixed.Проблема загрузки <head> была вызвана не добавлением соответствующих классов к объекту $page.

  1. #main содержит все содержимое, которое я хотел исчезнуть.
  2. head - это наш элемент <head>, содержащий все стили.
  3. body все тело страницы.

var $page = $('#main','head','body')

$(function(){
  'use strict';
  var $page = $('#main','head','body'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 1,
        blacklist:'.luxbar-item',
        onStart: {
          duration: 250, // Duration of our animation
          render: function ($container) {
            // Add your CSS animation reversing class
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onStart: {
          duration: 0,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);
          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});
...