Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!DOCTYPE html>
<meta charset="utf-8" />
<div id="app">
<button v-on:click="show=!show">切り替え</button>
jpg ファイルは適宜ご用意ください。
<transition appear>
<img v-if="show" src="./fig.jpg" v-cloak>
<transition appear>
<img v-if="show" src="./fig.jpg">
<img v-if="show" src="./fig.jpg">
<style type="text/css">
[v-cloak] {
display: none;
.v-enter-active, .v-leave-active {
transition: opacity 1s, transform 1s;
.v-enter, .v-leave-to {
opacity: 0;
transform: translateY(40px);
header {
text-align: right;
p {
font-size: 50px;
text-align: center;
img {
width: 200px;
<script src=""></script>
app = new Vue({
el: '#app',
data: {
show: true,
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.