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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何在文本更改上應(yīng)用 <div> 的動(dòng)畫(huà)

如何在文本更改上應(yīng)用 <div> 的動(dòng)畫(huà)

我有一個(gè)<div>, 來(lái)顯示文本。并為<div>. 我想<div>在更改文本時(shí)設(shè)置動(dòng)畫(huà)。我如何更改cssHTML  <div id="location-name-container">         <div id="location-name"></div>    </div>        document.getElementById('location-name').innerHTML = "Hello"CSS#location-name {    align-self: center;    width: 540px;    max-height: 100px;    color: #FFFFFF;    -webkit-text-stroke-color: #000000;    font-size: 42px;    line-height: 50px;    overflow: hidden;    text-overflow: ellipsis;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    animation: fade-in 200ms;   }@keyframes fade-in {    from { opacity: 0; }    to { opacity: 1; }  }    @keyframes fade-out {    from { opacity: 1; }    to { opacity: 0; }  } 單擊此處訪問(wèn)示例代碼
查看完整描述

4 回答

?
慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

您必須將此類任務(wù)的自定義事件與 js 中的 HTML 組件綁定：


 $(document).on('contentchanged', '#location-name', function() {

      alert('woo');

    });


$('#location-name').trigger('contentchanged');

在此示例中，一旦您的內(nèi)容更新，您將看到一個(gè)警報(bào)，您可以將警報(bào)代碼替換為您的自定義代碼。


 <div id="location-name-container">

      <div id="location-name">India</div>

</div>

觸發(fā)事件：- 當(dāng)下面的行執(zhí)行自定義事件將是一個(gè)觸發(fā)器


document.getElementById('location-name').innerHTML = "Hello"

[更新小提琴] https://jsfiddle.net/niteshsharma/wgqc69s8/1/


查看完整回答
反對(duì) 回復(fù) 2022-10-13
?
慕尼黑8549860

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊

我有一個(gè)簡(jiǎn)單的例子。


HTML


 <div class="data-container" id="first-container">

   <div id="location-name-container">

        <div id="location-name" class="run-animation">Hello</div>

  </div>

 </div>

 

 <script>

 setInterval(myFunction, 3000)

 var a = 1

 

 

 function myFunction(){

 locationname = document.getElementById('location-name');

 locationname.classList.remove("run-animation");

 void locationname.offsetWidth;

 locationname.classList.add("run-animation");

 

 locationname.innerHTML = "Hello"+a

 

 a++


 }

</script>

CSS


#location-name {


    background:#003344;

    align-self: center;

    width: 540px;

    max-height: 100px;

    color: #FFFFFF;

    -webkit-text-stroke-color: #000000;

    font-size: 42px;

    line-height: 50px;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    

}


.run-animation {

  /* position: relative; */

  animation: fade-in 2s linear;

}


@keyframes fade-in {

   0%{

   color:black;

  }

  30%{

  color:blue;

  }

  80%{

  color:green

  }

 

  

   from { opacity: 0; }

    to { opacity: 1; }

  }

  

  @keyframes fade-out {

    from { opacity: 1; }

    to { opacity: 0; }

  } 


查看完整回答
反對(duì) 回復(fù) 2022-10-13
?
吃雞游戲

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

您還可以在更改內(nèi)容后立即使用 JavaScript 重新啟動(dòng)動(dòng)畫(huà)。查看本教程： https ://css-tricks.com/restart-css-animation/


查看完整回答
反對(duì) 回復(fù) 2022-10-13
?
慕后森

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

function addText() {

  const elem = document.getElementById('location-name')


  setTimeout(() => {

    elem.innerText = "Hello"

    elem.classList.add('animate-text')

  }, 10);

  

  // REMOVE CLASS & TEXT TO VISUALIZE EFFECT

  elem.innerText = ""

  elem.classList.remove('animate-text')


}

#location-name {

  align-self: center;

  width: 540px;

  max-height: 100px;

  -webkit-text-stroke-color: #000000;

  font-size: 42px;

  line-height: 50px;

  height: 50px;

  overflow: hidden;

  text-overflow: ellipsis;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}


.animate-text {

  animation: fade-in 1s;

}


@keyframes fade-in {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

<div id="location-name-container">

  <div id="location-name"></div>

</div>

<button onclick="addText()">Add text</button>


查看完整回答
反對(duì) 回復(fù) 2022-10-13
  • 4 回答
  • 0 關(guān)注
  • 139 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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