Rails6.0 | 26 | Webアプリケーション開発 | 変更内容の強調表示 - 学生向けプログラミング入門

<<前　 [TOP] 　次>>

変更内容の強調表示をCSSアニメーションで実装します。
アニメーションはページが読み込まれたとき、またはクラスが要素に適用されたときにブラウザによって実行されます。
この場合、要素の開始と終了を定義するだけで済みます。
「C:\Rails6\work\shop\app\assets\stylesheets」フォルダの「line_items.scss」を以下のように編集します。

【C:\Rails6\work\shop\app\assets\stylesheets\line_items.scss】

// Place all the styles related to the LineItems controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/

@keyframes line-item-highlight {

	0% {
		background: #8f8;
	}

	100% {
		background: none;
	}
}

.line-item-highlight {
	animation: line-item-hightlight ls;
}

「@keyframes」はアニメーションを定義します。
この場合「line-item-highlight」という名前です。
その宣言の中でアニメーションのさまざまなDOM要素を指定します。
アニメーションの開始時（0％）、要素の背景色は明るい緑で指定しました。
これがハイライトの色になります。
アニメーションの最後（100％）では背景色はありません。
次に「line-item-highlight」という名前のCSSクラスを定義します。
これはアニメーションの名前を定義し、アニメーション時間を１秒に設定しています。

コントローラを修正します。
「C:\Rails6\work\shop\app\controllers」フォルダの「line_items_controller.rb」を以下のように編集します。
「create()」メソッドの「format.js { @current_item = @line_item }」が変更した部分です。

【C:\Rails6\work\shop\app\controllers\line_items_controller.rb】

class LineItemsController < ApplicationController

	include CurrentCart
	before_action :set_cart, only: [:create]
	before_action :set_line_item, only: [:show, :edit, :update, :destroy]

  # GET /line_items
  # GET /line_items.json
  def index
    @line_items = LineItem.all
  end

  # GET /line_items/1
  # GET /line_items/1.json
  def show
  end

  # GET /line_items/new
  def new
    @line_item = LineItem.new
  end

  # GET /line_items/1/edit
  def edit
  end

  # POST /line_items
  # POST /line_items.json
  def create

	good = Good.find(params[:good_id])
	@line_item = @cart.add_good(good)

    respond_to do |format|
      if @line_item.save
        format.html { redirect_to market_index_url }
	format.js { @current_item = @line_item }
        format.json { render :show, status: :created, location: @line_item }
      else
        format.html { render :new }
        format.json { render json: @line_item.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /line_items/1
  # PATCH/PUT /line_items/1.json
  def update
    respond_to do |format|
      if @line_item.update(line_item_params)
        format.html { redirect_to @line_item, notice: '品目が更新されました。' }
        format.json { render :show, status: :ok, location: @line_item }
      else
        format.html { render :edit }
        format.json { render json: @line_item.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /line_items/1
  # DELETE /line_items/1.json
  def destroy
    @line_item.destroy
    respond_to do |format|
      format.html { redirect_to line_items_url, notice: '品目を破棄しました。' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_line_item
      @line_item = LineItem.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def line_item_params
      params.require(:line_item).permit(:good_id, :cart_id)
    end
end

最後にビューを変更します。
「C:\Rails6\work\shop\app\views\line_items」にある「_line_item.html.erb」を以下のように編集します。

【C:\Rails6\work\shop\app\views\line_items\_line_item.html.erb】

<% if line_item == @current_item %>
	<tr class="line-item-highlight">
<% else %>
	<tr>
<% end %>
	<td><%= line_item.good.title %></td>
	<td class="quantity"><%= line_item.quantity %></td>
	<td class="price"><%= number_to_currency(line_item.total_price) %></td>
</tr>