溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
要在class的樣式中加上transform-origin: left center，不然可能會出問題：
<!DOCTYPE?html> <html> <head> ????<title></title> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ????<script?src="./vue.js"></script> ????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?--> ????<style?type="text/css"> ????????@keyframes?bounce-in?{ ????????????0%?{ ????????????????transform:?scale(0); ????????????} ????????????50%?{ ????????????????transform:?scale(15); ????????????} ????????????100%?{ ????????????????transform:?scale(1); ????????????} ????????} ????????.fade-enter-active?{ ????????????transform-origin:?left?center; ????????????animation:?bounce-in?1s; ????????} ????????.fade-leave-active?{ ????????????transform-origin:?left?center; ????????????animation:?bounce-in?1s?reverse; ????????} ????</style> </head> <body> ????<div?id="root"> ????????//name隨便取名: ????????<transition?name="fade"> ????????????<div?v-show="show">hello</div> ????????</transition> ????????<button?@click="handleClick">切換</button> ????</div> ????<script?type="text/javascript"> ????????var?vm?=?new?Vue({ ????????????el:?"#root", ????????????data:?{ ????????????????show:?true ????????????}, ????????????methods:?{ ????????????????handleClick:?function()?{ ????????????????????this.show?=?!this.show ????????????????} ????????????} ????????}); ????</script> </body> </html>
當然，還可以自定義style中的class名：
<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
????<style?type="text/css">
????????@keyframes?bounce-in?{
????????????0%?{
????????????????transform:?scale(0);
????????????}
????????????50%?{
????????????????transform:?scale(15);
????????????}
????????????100%?{
????????????????transform:?scale(1);
????????????}
????????}
????????/*.fade-enter-active?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s;
????????}
????????.fade-leave-active?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s?reverse;
????????}*/
????????.haha-active?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s;
????????}
????????.haha-leave?{
????????????transform-origin:?left?center;
????????????animation:?bounce-in?1s?reverse;
????????}
????</style>
</head>
<body>
????<div?id="root">
????????//name隨便取名:
????????<!--?<transition?name="fade">
????????????<div?v-show="show">hello</div>
????????</transition>?-->
????????//自定義class名字：
????????<transition?name="fade"?enter-active-class="haha-active"?leave-active-class="haha-leave">
????????????<div?v-show="show">hello</div>
????????</transition>
????????<button?@click="handleClick">切換</button>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????</script>
</body>
</html>自己命名class名有個好處，可以用別人的動畫。css在這個網址下載：https://daneden.github.io/animate.css/
<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<link?rel="stylesheet"?type="text/css"?href="./animate.css">
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
</head>
<body>
????<div?id="root">
????????//name隨便取名:
????????<!--?<transition?name="fade">
????????????<div?v-show="show">hello</div>
????????</transition>?-->
????????//自定義class名字：
????????<transition?name="fade"?enter-active-class="animated?rubberBand"?leave-active-class="animated?hinge">
????????????<div?v-show="show">hello</div>
????????</transition>
????????<button?@click="handleClick">切換</button>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????}
????????????}
????????});
????</script>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
