Переход Css не работает в action view Rails

#html #css #ruby-on-rails

#HTML #css #ruby-on-rails

Вопрос:

Я пытался понять, почему мой переход css не работает. Я использую библиотеку hover.css для достижения эффекта отскока при наведении курсора мыши на кнопку. Но моя кнопка, похоже, не работает с синтаксисом action view. Вот мой ERB-код

 <h1>Goals</h1>
<div class="row">
<% @goals.each do |goal| %>
  <div class="one-third column" style="border: solid 0.5px #555; border-radius:10px;padding: 20px;">
    <h3><%= goal.title %></h3>
    <p><%= goal.is_goal_validated %></p>
    <p><%= goal.is_goal_completed %></p>
    <p><%= button_to 'Pledge', goal, :method => :get, class: "hvr-bounce-to-right" %></p>
  </div>
<% end %>
<button class="hvr-bounce-to-right">hi</button>
</div>

И это мой код css

 .hvr-bounce-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  color: white;
}
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

 <button class="hvr-bounce-to-right">hi</button>

Дело в том, что мой синтаксис кнопки html работает, но не для синтаксиса action view. Любая помощь будет высоко оценена.

1. Вы должны задать это как вопрос CSS, ваш код, генерируемый rails, не имеет значения. вы также должны заменить код erb сгенерированным HTML.

2. @Irsyad14 Каков ваш ожидаемый результат, если вы нажмете эту кнопку?

3. Не существует такой вещи, как Action view syntax . Action view — это система шаблонов, которая может отображать ERB, Haml, Slim, JBuilder и т. Д. guides.rubyonrails.org/action_view_overview.html

4. @Dinesh просто эффект перехода при наведении курсора мыши на кнопку

Ответ №1:

Итак, ваши стили CSS, приведенные выше, похоже, отлично работают, по крайней мере, для <button class="hvr-bounce-to-right">hi</button>

Поэтому проблема, вероятно, заключается в коде ruby, используемом для создания кнопок. Вы должны проверить (и опубликовать, если на то пошло) сгенерированный html-источник следующей строки (что, я полагаю, приводит к тому, что кнопки не работают).).

 <%= button_to 'Pledge', goal, :method => :get, class: "hvr-bounce-to-right" %>

1. да, я думаю, это как-то связано с шаблоном erb. В любом случае спасибо за предупреждение

2. @Irsyad14 Знаете ли вы, как вы можете увидеть исходный код HTML вашей сгенерированной страницы?