Skip to content

Commit e120d14

Browse files
committed
update move animation example
1 parent f5f8453 commit e120d14

File tree

1 file changed

+7
-5
lines changed

1 file changed

+7
-5
lines changed

examples/move-animations/index.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,24 @@
1515
border: 1px solid #666;
1616
box-sizing: border-box;
1717
}
18+
/* 1. declare transition */
1819
.fade-move, .fade-enter-active, .fade-leave-active {
1920
transition: all .5s cubic-bezier(.55,0,.1,1);
2021
}
21-
.fade-enter {
22+
/* 2. declare enter from and leave to state */
23+
.fade-enter, .fade-leave-to {
2224
opacity: 0;
23-
transform: scaleY(0) translate(30px, 0);
25+
transform: scaleY(0.01) translate(30px, 0);
2426
}
27+
/* 3. ensure leaving items are taken out of layout flow so that moving
28+
animations can be calculated correctly. */
2529
.fade-leave-active {
2630
position: absolute;
27-
opacity: 0;
28-
transform: scaleY(0.01) translate(30px, 0);
2931
}
3032
</style>
3133
<script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
3234
<!-- Delete ".min" for console warnings in development -->
33-
<script src="../../dist/vue.min.js"></script>
35+
<script src="../../dist/vue.js"></script>
3436
</head>
3537
<body>
3638
<div id="el">

0 commit comments

Comments
 (0)