CSS transitionã§é ‘張らãªã„Vue.js transition - Qiita<template> <div> <button @click="show = !show"> 押ã—㦠</button> <div :class="{'is-show': show}" class="fade"> <p>åŠ è—¤æµ</p> </div> </div> </template> <style scoped> .fade { opacity: 0.0; transition: all .5s ease-out; } .fade.is-show { opacity: 1.0; } </style> ã“ã‚Œã§å®Ÿéš›ã«è¡¨ç¤ºã•ã‚Œã‚‹ã‹ã¨æ€ã„ã¾ã™ãŒã€ä»¥ä¸‹ã®ã‚ˆã†ãªå•é¡ŒãŒã‚ã‚‹ã‹ã¨æ€ã„ã¾ã™ã€‚ 常ã«DOM上ã«è¦ç´ 自体ã¯è¡¨ç¤ºã•ã‚Œã‚‹ãŸã‚ã€v-ifãªã©ã§ã‚·ãƒ³ãƒ—ルã«è¨˜è¿°ã§ããšã€è¨˜è¿°ãŒã‚ã‹ã‚Šã¥ã‚‰ããªã‚‹ コンãƒãƒ¼ãƒãƒ³ãƒˆãªã©ã®è¡¨ç¤ºã‚’切り分ã‘ã‚‹å ´åˆã€ created() ãŒè¡¨ç¤ºå‰ã«å®Ÿè¡Œã•ã‚Œã‚‹ãŸã‚ã€ã€Œé–‹ã„ãŸæ™‚ã«create
{{#tags}}- {{label}}
{{/tags}}