Почему стили css подключенные в теле страницы работают иначе чем стили подключенные в файле css в вордпрессе?

Question

[Алексей Чумаченко]

Добрый вечер. помогите пожалуйста разобраться в следующем вопросе.
есть такой вот код https://codepen.io/Alexeevich2/pen/abzwqBQ
и если я подключаю стили в теле самой страницы все работает корректно, однако если стили прописываю в файле css то эффект появления элемента искажается. такая ситуация происходит только на вордпрессе.
стили, скрипты подключаю правильно, попробовал установить новую версию джейквери, однако результат тот же. Буду очень признателен любой помощи.

Comments

[Шохрух Шаймардонов]

а где ссылка на сайт с вп, чтобы понять как конкретно искажается?

[Алексей Чумаченко]

сайт на локалке, увы

Answer 1

[Тарас Шульга]

и если я подключаю стили в теле самой страницы все работает корректно, однако если стили прописываю в файле css то эффект появления элемента искажается

Искажаться - это не работает, или работает не так? Если первое то css/js(старые у тебя в кеше - почисти его), или твой код(jquery) с кем-то там конфликтует(это смотри консоль). Если второе, то скорее всего что-то перебивает твои стили и все.

такая ситуация происходит только на вордпрессе.

Это ты и другие cms побывал или глянул на невинной верстке и потом начал тыкать в WP?

P.S. тяжко, что-то говорить - вы нам предоставили чистый код в вакуме по которому ничего не скажешь/не поймешь. Это все равно, что я вам кино вот такой код https://codepen.io/angryyum/pen/RwNprJP и скажу тута она работает, а вот на WP не хочет, но я подключил все правильно - это точно! В чем проблема?

Согласитесь тяжко понять причину - не видя среды где ошибка возникает.

Comments

[Алексей Чумаченко]

пробовал только на верстке. все работает, но не так как на обычной верстке.

[Тарас Шульга]

Алексей Чумаченко, тогда скорей всего, что-то перебивает css стили.

[Алексей Чумаченко]

спасибо, за ответ. буду искать в чем проблема

[Тарас Шульга]

Алексей Чумаченко, инспектор/консоль посмотрите, в 90% там можно увидеть источник проблемы

[Алексей Чумаченко]

спасибо большое, уже смотрел , ни чего. Дело в том, что на сайте еще практически ни какого кода, только начал делать. так что и не знаю в чем может быть проблема, первый раз с таким сталкиваюсь

[Тарас Шульга]

Алексей Чумаченко, ну проблема в том, что тяжко что-то сказать по чистому коду, а вот самый смешной вопрос, как вы jquery подключаете в WP?)
А то как-то часто вижу проблемы у новичков с этим.

[Алексей Чумаченко]

деактивирую старую версию джеквери и с сдн подключаю последнюю. на счет того что по коду тяжело разобраться не видя среды, это сто процентов.

[Тарас Шульга]

Алексей Чумаченко, ну то что офайте старую уже неплохо - лол.
Ну поэтому хотя бы на каком-то хосте развернули за 50р/месяц и норм

[Алексей Чумаченко]

так и придется сделать. просто думал что может кто то с такой проблемой сталкивался. просто вроде бы элементарный css и вот в чем то загвоздка. ладно бы если не работало, а так если прописать именно в теле страницы то все норм. уже и пробовал прописывать !important, думал может действительно что то перебивает стили, но и это не спасло.

[Тарас Шульга]

Алексей Чумаченко, а в двух словах чем отличается пример с codeopen и его реализация на WP?

[Алексей Чумаченко]

идея та же самая, по нажатию показывать блок с таким эффектом. на вордпрессе, этот эффект показывается не так как на codeopen, а он просто появляется и врошается влево в право. но если прописать css стили в шаблоне самой страницы все работает корректно.

[Алексей Чумаченко]

вот ссылка на сайт t50929tf.beget.tech

[Тарас Шульга]

Алексей Чумаченко, хмм честно не сильно понял, но самый первый вариант побывали?
Я про кеш - ибо браузер кеширует css/js на время.
Помою когда-то давно, что-то схожее меня столку сбило.

[Алексей Чумаченко]

вот так работает на вордпрессе

[Алексей Чумаченко]

кеш чистил, сам не раз сталкивался с такой проблемкой))

[Алексей Чумаченко]

на главной странице блоки где кнопка "читать"

[Тарас Шульга]

У меня анимация происходит так же как и на codeopen только быстрей - лол

[Алексей Чумаченко]

сейчас удалю стили с тела страницы.

[Алексей Чумаченко]

посмотрите сейчас

[Алексей Чумаченко]

вот если этот код, прописываю на странице , то все работает как нужно

[Алексей Чумаченко]

<style>
	
/*	.active{
  animation: flipInY .5s linear;
}

.active-out{
  animation: flipOutX .5s linear;
}


@keyframes flipInY {
  from {
    transform: rotateY(90deg);
  }

  to {
    transform: rotateY(0deg);
  }
}

@keyframes flipOutX {
  from {
    transform: rotateX(0deg);
  }

  to {
    transform: rotateX(90deg);
  }
}*/

</style>

[Алексей Чумаченко]

если оставить этот код в файле стилей, то будет работать как сейчас

[Алексей Чумаченко]

при чем что самое интересное, что в обратную сторону, когда скрываешь элемент, все работает как нужно

[Тарас Шульга]

Почему-то я грешу на то что вы анимацию в animate.css перебиваете - в итоге из-зав конфликта выскакивает такая лажа.

[Алексей Чумаченко]

Светлая Вы голова. огромное спасибо. действительно проблема было в этом. еще раз ОГРОМНОЕ СПАСИБО

[Тарас Шульга]

А вы тосно jquery перебиваете?)

<script type='text/javascript' src='http://t50929tf.beget.tech/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://t50929tf.beget.tech/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

А вот ваше версии 3.4.1 я нигде не вижу.

[Алексей Чумаченко]

дело было не в джейквери, и я по этому вернул все как было изначально.

[Тарас Шульга]

Алексей Чумаченко, не - это я понял, просто смотрю, что jqury стар как наш мир.
Ну как понял проблема решена?)

[Алексей Чумаченко]

да, проблема решена. спасибо вам большое.

[Тарас Шульга]

Алексей Чумаченко, да без проблем, все я дальше woocom ковырять хд

[Алексей Чумаченко]

тогда приятной вам работы).