From e120d1459d921de3e961343ea9233a8c6c438a44 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 27 Dec 2016 17:24:43 -0500 Subject: [PATCH] update move animation example --- examples/move-animations/index.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/examples/move-animations/index.html b/examples/move-animations/index.html index ae246607..8482d011 100644 --- a/examples/move-animations/index.html +++ b/examples/move-animations/index.html @@ -15,22 +15,24 @@ border: 1px solid #666; box-sizing: border-box; } + /* 1. declare transition */ .fade-move, .fade-enter-active, .fade-leave-active { transition: all .5s cubic-bezier(.55,0,.1,1); } - .fade-enter { + /* 2. declare enter from and leave to state */ + .fade-enter, .fade-leave-to { opacity: 0; - transform: scaleY(0) translate(30px, 0); + transform: scaleY(0.01) translate(30px, 0); } + /* 3. ensure leaving items are taken out of layout flow so that moving + animations can be calculated correctly. */ .fade-leave-active { position: absolute; - opacity: 0; - transform: scaleY(0.01) translate(30px, 0); } - +