입문

이번에 애니메이션의 투고, 편집, 삭제를 할 때 플래시 메시지를 이렇게 표시하고 싶어서 그 방법에 대해 설명합니다.

사용 방법 정보

먼저 보기 파일에 flash 메시지를 표시하는 설명을 추가합니다.이번에 사용한 것은 Haml입니다.필요하다면 = render partial: "パス名" 을 사용하여 부분적으로 템플릿화하세요.
_flash.html.haml

.notification
  - flash.each do |key, value|
    = content_tag :div, value, class: key

application.html.haml

%body
 .header.container
  = render partial: "shared/flash"

notice:를 사용하여 다음 표시할 문자를 컨트롤러에 설명합니다.이번에는 애니메이션 투고가 끝날 때 표시되는 텍스트를 예로 들 수 있습니다.
videos_controller.rb

def create
    @video = Video.create(name: video_params[:name], image: video_params[:image], text: video_params[:text], user_id: current_user.id)
    if @video.save
      redirect_to root_path, notice: '動画の投稿に成功しました！'
    else
      flash.now[:notice] = '動画の投稿に失敗しました.....'
      render :new
    end
  end

이 설명을 통해 애니메이션 투고가 성공하면 動画の投稿に成功しました！, 애니메이션 투고가 실패하면 動画の投稿に失敗しました..... 으로 표시됩니다.notice:(flash)과flash.now의 차이점은 방향을 재정립하느냐 아니면 렌더를 사용하느냐에 있다.

게시물 성공 시

게시물 실패 시

그런 다음 jQuery를 사용하여 JS 파일에 기술하여 시간 차이로 인해 디스플레이가 사라집니다.
flash.js

$(function(){
  setTimeout("$('.notice, .alert').fadeOut('slow')", 800);
  });

사용setTimeout, 일정 시간 후 특정 처리 가능.
fadeOut은 애니메이션을 지정하는 데 사용되며 지정slow과 같은 동작, 800(ミリ単位) 등 시간을 통해 마음대로 표현할 수 있습니다.
그리고 css에 레이아웃을 기술하면 됩니다.

예제

style.scss

// フラッシュメッセージのデザイン
.notification {
  background-color: black;
  color: white;
  font-size: 3rem;
  font-family: "SoukouMincho";
}

총결산

이렇게 플래시 메모리로 표현하면 쓸데없는 페이지를 준비할 필요가 없기 때문에 편리하다.
아래의 보도를 참고하십시오.
https://qiita.com/dice9494/items/2a0e92aba58a516e42e9
https://pg-happy.jp/rails-flash-message.html