第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue的動畫transition不起作用

vue的動畫transition不起作用

POPMUISE 2018-08-18 16:34:48
<script src="../vue.js"></script><title>Document</title><style>     .fade-enter{        opacity: 1;     }    .fade-enter-active{        transition: opacity 3s;     }</style></head><body><div id="app">     <transition name='fade'>         <div v-show='show'>hello world</div>     </transition>          <button @click='handclick'>change</button> </div>transition的過渡效果不起作用啊,為什么??
查看完整描述

2 回答

?
蕭十郎

TA貢獻1815條經驗 獲得超13個贊

不透明度為1不會有什么動畫吧,而且點擊事件控制show的變化寫了么

查看完整回答
反對 回復 2018-08-19
?
lfeish

TA貢獻1條經驗 獲得超0個贊

這個問題的根本是 :

div元素使用display:none(block)實現隱藏與顯示的時候,會與transition屬性沖突,導致過渡效果無效。display會破壞transition。

v-if 和 v-show 都會引起瀏覽器重流(reflow).??

從效果上來看,display:none 時,元素立即消失了,動畫無效果。display:block時,元素立即顯示了,動畫無效果。

不過讓我比較奇怪的是,如果在 vue 組件中 卻可以起作用

查看完整回答
反對 回復 2019-07-16
  • 2 回答
  • 0 關注
  • 6818 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號