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

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

為什么我的 div 僅在我添加 isopen=true 的屬性時才動畫

為什么我的 div 僅在我添加 isopen=true 的屬性時才動畫

慕桂英546537 2022-01-20 20:26:16
當(dāng)我單擊一個按鈕時，我希望我的 div 動畫。似乎只有顯示動畫有效，但隱藏?zé)o效。即使屬性值發(fā)生變化，隱藏動畫也根本不起作用。$("#divShow").click(function() {  $('.parent').attr('isopen', 'true');});$("#divHide").click(function() {  $('.parent').attr('isopen', 'false');});.parent {  display: none; //hidden by default  width: 40px;  height: 40px;  background: blue;}@keyframes show {  50% {    transform: scale(1.03);  }}@keyframes hide {  50% {    transform: scale(0.97);  }  100% {    opacity: 0;    transform: scale(0.90);  }}[isopen="true"] {  display: block;  -webkit-animation: show .3s;  -moz-animation: show .3s;  -ms-animation: show .3s;  animation: show .3s;}[isopen="false"] {  -webkit-animation: hide .3s;  -moz-animation: hide .3s;  -ms-animation: hide .3s;  animation: hide .3s;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button id="divShow">Show</button><button id="divHide">Hide</button><div class="parent"></div>
查看完整描述

3 回答

?
料青山看我應(yīng)如是

TA貢獻1772條經(jīng)驗 獲得超8個贊

我想我已經(jīng)按照你的意愿工作了。請參閱下面的代碼片段。


您的節(jié)目類有顯示塊，但是當(dāng)您將其刪除時，它會立即恢復(fù)為無。只需在隱藏動畫的末尾添加 display none 即可。


像這樣：


@keyframes hide {

  50% {

    transform: scale(0.97);

  }

  100% {

    opacity: 0;

    transform: scale(0.90);

    display: none;

  }

}


[isopen="false"] {

  display: block;

  animation: hide .3s forwards;

}

代碼片段：


$("#divShow").click(function() {

  $('.parent').attr('isopen', 'true');

});


$("#divHide").click(function() {

  $('.parent').attr('isopen', 'false');

});

.parent {

  display: none; //hidden by default

  width: 40px;

  height: 40px;

  background: blue;

}


@keyframes show {

  50% {

    transform: scale(1.03);

  }

}


@keyframes hide {

  50% {

    transform: scale(0.97);

  }

  100% {

    opacity: 0;

    transform: scale(0.90);

    display: none;

  }

}


[isopen="true"] {

  display: block;

  -webkit-animation: show .3s;

  -moz-animation: show .3s;

  -ms-animation: show .3s;

  animation: show .3s;

}


[isopen="false"] {

  display: block;

  -webkit-animation: hide .3s forwards;

  -moz-animation: hide .3s forwards;

  -ms-animation: hide .3s forwards;

  animation: hide .3s forwards;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="divShow">Show</button>

<button id="divHide">Hide</button>

<div class="parent">

</div>


查看完整回答
反對 回復(fù) 2022-01-20
?
尚方寶劍之說

TA貢獻1788條經(jīng)驗 獲得超4個贊

在這個答案的幫助下：https ://stackoverflow.com/a/15407098/2181514


您可以添加forwards到動畫中，以便它們保留最后 (100%) 關(guān)鍵幀。


添加display:block以[isopen=false]確保它不會立即隱藏：


animation: hide .3s forwards;

更新片段：


$("#divShow").click(function() {

  $('.parent').attr('isopen', 'true');

});


$("#divHide").click(function() {

  $('.parent').attr('isopen', 'false');

});

.parent {

  display: none; 

  width: 40px;

  height: 40px;

  background: blue;

}


@keyframes show {

  50% {

    transform: scale(1.03);

  }

}


@keyframes hide {

  50% {

    transform: scale(0.97);

  }

  100% {

    opacity: 0;

    transform: scale(0.90);

  }

}


[isopen="true"] {

  display: block;

  -webkit-animation: show .3s;

  -moz-animation: show .3s;

  -ms-animation: show .3s;

  animation: show .3s;

}


[isopen="false"] {

  display: block;

  -webkit-animation: hide .3s forwards;

  -moz-animation: hide .3s forwards;

  -ms-animation: hide .3s forwards;

  animation: hide .3s forwards;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="divShow">Show</button>

<button id="divHide">Hide</button>

<div class="parent">

</div>


查看完整回答
反對 回復(fù) 2022-01-20
?
慕尼黑的夜晚無繁華

TA貢獻1864條經(jīng)驗 獲得超6個贊

可以使用轉(zhuǎn)換以更少的代碼行簡單、高效地完成


$("#divShow").click(function() {

  $('.parent').addClass('show');

});


$("#divHide").click(function() {

  $('.parent').removeClass('show');

});

.parent {

   width: 40px;

  height: 40px;background: blue;

  transform: scale(0.97);

  transition: all 0.3s;

  opacity:0;

  

}


.show {

  opacity:1;

  transform: scale(1.03);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="divShow">Show</button>

<button id="divHide">Hide</button>

<div class="parent">

</div>


查看完整回答
反對 回復(fù) 2022-01-20
  • 3 回答
  • 0 關(guān)注
  • 198 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號