NuxtでVuxeを使うラスト

今回は買い物リストにアニメーションをつけて終わりです。

test.vue

<template>
	<v-container>
		<v-layout justify-center row>
			<v-flex xs11 md10>
				<div id="main-area">
					<h1>超リッチな買い物リスト</h1>

					<v-layout justify-space-around>

						<v-flex xs5 md4>
							<v-text-field
								label="商品名"
								v-model="name"
								required
							></v-text-field>
						</v-flex>

						<v-flex xs5 md4>
							<v-text-field
								label="値段"
								v-model="price"
								type="number"
								required
							></v-text-field>
						</v-flex>

						<v-flex xs1 md1>
							<v-text-field
								label="個数"
								type="number"
								v-model="quantity"
								required
							></v-text-field>
						</v-flex>

					</v-layout>

					<v-layout>

						<v-flex xs2>
							<v-btn block color="secondary" @click='add' dark>ADD</v-btn>
						</v-flex>

						<v-flex xs1 md1 offset-xs1 offset-md1>
							<v-text-field
									label="税率(%)"
									type="number"
									v-model="tax"
									required
							></v-text-field>
							
						</v-flex>
						
					</v-layout>


					<div id="list-area">


	<v-list
		flat
		subheader
		three-line
	>
		<v-subheader>買い物リスト</v-subheader>

		<transition-group name="lists" tag="v-list-item-group" multiple>
			<v-list-item  v-for="list in lists" v-bind:key="list">
				<template v-slot:default="{ active }">
					<v-list-item-action>
						<v-checkbox v-model="active"></v-checkbox>
					</v-list-item-action>
					<v-list-item-content>
						<v-list-item-title>{{list.name}}</v-list-item-title>
						<v-list-item-subtitle>
							<span v-if="list.price!=''">{{list.price}}円</span>{{list.quantity}}個
							<span class="float-right">
									<v-btn class="ma-2" color="red" dark v-on:click="delete_list(list)">
										delete
									</v-btn>
							</span>
						</v-list-item-subtitle>
					</v-list-item-content>
				</template> </v-list-item>
</transition-group>
</v-list>
</div>
<v-simple-table>
  <thead>
    <tr>
      <th class="text-left">税込金額</th>
      <th class="text-left">税抜金額</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ sum + ( Math.floor(sum * (this.tax / 100)) )}}円</td>
      <td>{{ sum }}円</td>
    </tr>
  </tbody>
</v-simple-table>
</div>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
  export default {
    layout: 'mylayout',
    data(){
  	  return {
  		  name:'',
  		  price:'',
  		  quantity:1,
  		  tax:8
  	  }
    },
    //状態を変更する
    methods:{
  	  add:function(){
  		  if(this.name != ''){
  			this.$store.dispatch(`list/addList`,{_name:this.name,_price:this.price,_quantity:this.quantity})
  			this.name = ''
  			this.price = ''
  			this.quantity = 1
  		  }
  
  	  },
  	  delete_list(list){
  		  this.$store.dispatch(`list/deleteList`,list)
  	  }
    },
    //状態を取得する
    computed: {
  	  lists(){
  		  return this.$store.getters['list/allLists']
  	  },
  	  sum(){
  		  return this.$store.getters['list/getSum']
  		  //return num.reduce((x,y) => x + (y.price * y.quantity))
  	  }
    }
  }
</script>
<transition-group name="lists" tag="v-list-item-group" multiple>

というタグを追加して、v-list-item-groupをtagに設定しています。
トランジションを設定したい要素が複数ある場合はtransition-groupを使います。
tagで指定したもので囲われます。デフォルトはspanだそうです。
tag=”div”にすると<div></div>で囲われます。

これでトランジションを行う準備ができたのでcssを用意します

main.css

#main-area{
    border:1px solid #000;
    padding:10px;
}

#list-area{
    margin-top:20px;
}


/* トランジション */
.lists-leave-active,
.lists-enter-active {
    transition: opacity .8s, transform .8s ease;
}
.lists-leave-to,
.lists-enter {
    opacity: 0;
    transform: translateX(300px);
}
.lists-leave,
.lists-enter-to {
    opacity: 1;
 
}
.lists-move {
    transition: transform .8s;
}

これだけで簡単にアニメーションが設定できます。

Enter/Leave

コメント

タイトルとURLをコピーしました