БЛОГ НА HUSL


Почему перестают применяться стили CSS после подключения скрипта в HTML?

Автор вопроса: Аndrey Orehov

Кто подскажет, что происходит и почему, когда подключаешь <script src="js/script.js"></script> то перестают работать transition в CSS, чтоб изменить div, его положение и размер с временной отсрочкой.

Откройте HTML в браузере без редактирования, а после разкомментируйте: <!--<script src="js/script.js"></script>-->

У кого работает или нет, НЕполенитесь оставьте коммент, очень уж хочется понять, что не так и у одного меня ли такое?

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <!--КНОПКА-->
      <div class="order">
         <div class="order__translate">
            <div class="order__rotate">
               <div class="order__animation">
                  <a class="custom-btn" href=#><span style="color: white;">Заказать</span></a>
               </div>
            </div>
         </div>
      </div>
 <!--<script src="js/script.js"></script>-->
</body>
</html>

CSS:

a {
    text-decoration: none;
}
/*КНОПКА*/
.order__translate {
   transform: translate(-140px, 60px);
   -webkit-transition: 2s ease-out;
   -webkit-transition-delay: 2.5s;
   -o-transition: 1s ease-out;
   -o-transition-delay: 2.5s;
   -moz-transition: 2s ease-out;
   -moz-transition-delay: 1s;
   transition: .8s ease-out;
   transition-delay: 2.5s;
}
.order__rotate{
   transform: rotate(-90deg);
   -webkit-transition: 2s ease-out;
   -webkit-transition-delay: 2.5s;
   -o-transition: 1s ease-out;
   -o-transition-delay: 2.5s;
   -moz-transition: 2s ease-out;
   -moz-transition-delay: 1s;
   transition: .8s ease-out;
   transition-delay: 2.5s;
}
.order__animation {
   transform: scale(0.5);
   -webkit-transition: 2s ease-out;
   -webkit-transition-delay: 2.5s;
   -o-transition: 1s ease-out;
   -o-transition-delay: 2.5s;
   -moz-transition: 2s ease-out;
   -moz-transition-delay: 1s;
   transition: .8s ease-out;
   transition-delay: 2.5s;
}
.custom-btn {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-flow: row nowrap;
   flex-flow: row nowrap;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   width: 100%;
   height: 58px;
   padding-top: 2px;
   border: none;
   border-bottom: 2px solid #346bd379;
   border-radius: 6px;
   position: relative;
   font-size: 15px;
   font-weight: bold;
   text-align: center;
   text-transform: uppercase;
   cursor: pointer;
   overflow: hidden;
   background: #1f1f25;
   background: -webkit-gradient(linear, left top, right top, color-stop(25%, #6563fa), to(#7a98fc));
   background: linear-gradient(to right, #406cfd 25%, #ffbb00);
   -webkit-box-shadow: 0px 9px 16px 0px rgba(250, 73, 35, 0.25);
   box-shadow: 0px 9px 16px 0px rgba(250, 73, 35, 0.25);
}
.custom-btn:before {
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: #ffffff;
   opacity: 0;
   z-index: 1;
}
.custom-btn:after {
   content: "";
   display: block;
   width: 40px;
   height: 300px;
   margin-left: 60px;
   background: rgba(255, 255, 255, 0.4);
   position: absolute;
   left: -40px;
   top: -150px;
   z-index: 1;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-animation-name: slideme;
   animation-name: slideme;
   -webkit-animation-duration: 4s;
   animation-duration: 4s;
   -webkit-animation-delay: 0.05s;
   animation-delay: 0.05s;
   -webkit-animation-timing-function: ease-in-out;
   animation-timing-function: ease-in-out;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
}
.custom-btn span {
   -webkit-transition: 2s ease-out;
   -webkit-transition-delay: 2.5s;
   -o-transition: 1s ease-out;
   -o-transition-delay: 2.5s;
   -moz-transition: 2s ease-out;
   -moz-transition-delay: 1s;
   transition: .8s ease-out;
   transition-delay: 2.5s;
}
@-webkit-keyframes slideme{
     0% { left: -30px; margin-left: 0px; }
    30% { left: 110%; margin-left: 80px; }
   100% { left: 110%; margin-left: 80px; }
}

Источник

Ответы (1 шт):

Автор решения: Vasily

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

Тут все работает:

window.addEventListener("DOMContentLoaded", () => {
  const handleClick = () => {
    console.log("click")
  }
  document.querySelector("a").addEventListener("click", handleClick)
})
a {
  text-decoration: none;
}

.order__translate {
  transform: translate(-140px, 60px);
  -webkit-transition: 2s ease-out;
  -webkit-transition-delay: 2.5s;
  -o-transition: 1s ease-out;
  -o-transition-delay: 2.5s;
  -moz-transition: 2s ease-out;
  -moz-transition-delay: 1s;
  transition: .8s ease-out;
  transition-delay: 2.5s;
}

.order__rotate {
  transform: rotate(-90deg);
  -webkit-transition: 2s ease-out;
  -webkit-transition-delay: 2.5s;
  -o-transition: 1s ease-out;
  -o-transition-delay: 2.5s;
  -moz-transition: 2s ease-out;
  -moz-transition-delay: 1s;
  transition: .8s ease-out;
  transition-delay: 2.5s;
}

.order__animation {
  transform: scale(0.5);
  -webkit-transition: 2s ease-out;
  -webkit-transition-delay: 2.5s;
  -o-transition: 1s ease-out;
  -o-transition-delay: 2.5s;
  -moz-transition: 2s ease-out;
  -moz-transition-delay: 1s;
  transition: .8s ease-out;
  transition-delay: 2.5s;
}

.custom-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 58px;
  padding-top: 2px;
  border: none;
  border-bottom: 2px solid #346bd379;
  border-radius: 6px;
  position: relative;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  background: #1f1f25;
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, #6563fa), to(#7a98fc));
  background: linear-gradient(to right, #406cfd 25%, #ffbb00);
  -webkit-box-shadow: 0px 9px 16px 0px rgba(250, 73, 35, 0.25);
  box-shadow: 0px 9px 16px 0px rgba(250, 73, 35, 0.25);
}

.custom-btn:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  opacity: 0;
  z-index: 1;
}

.custom-btn:after {
  content: "";
  display: block;
  width: 40px;
  height: 300px;
  margin-left: 60px;
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  left: -40px;
  top: -150px;
  z-index: 1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation-name: slideme;
  animation-name: slideme;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.custom-btn span {
  -webkit-transition: 2s ease-out;
  -webkit-transition-delay: 2.5s;
  -o-transition: 1s ease-out;
  -o-transition-delay: 2.5s;
  -moz-transition: 2s ease-out;
  -moz-transition-delay: 1s;
  transition: .8s ease-out;
  transition-delay: 2.5s;
}

@-webkit-keyframes slideme {
  0% {
    left: -30px;
    margin-left: 0px;
  }
  30% {
    left: 110%;
    margin-left: 80px;
  }
  100% {
    left: 110%;
    margin-left: 80px;
  }
}
<div class="order">
  <div class="order__translate">
    <div class="order__rotate">
      <div class="order__animation">
        <a class="custom-btn" href=#><span style="color: white;">Заказать</span></a>
      </div>
    </div>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.