CSSの移行は休暇中ではありません

-2

私は要素から外に出ても移行したいのですが、うまくいきません。そのまま元のCSSに戻ります。ちょうど私のためのホバーの仕事。 CSSの移行は休暇中ではありません

$(function() { 
 

 
    $(".neuesTicketSpalte").hover(
 
    function() { 
 
     $(".textNeuesTicket").text("Erstelle ein neues Ticket"); 
 
    }, 
 
    function() { 
 
     $(".textNeuesTicket").text("Neues Ticket"); 
 
    } 
 
); 
 

 
});

.neuesTicketSpalte .panelNeu { 
 
    transition: border-left 1s ease; 
 
} 
 

 
.neuesTicketSpalte:hover .panelNeu { 
 
    display: inline-block; 
 
    border-top: 50px solid transparent; 
 
    border-left: 80px solid rgba(46, 143, 143, 1); 
 
    border-bottom: 50px solid transparent; 
 
    font-size: 0.3em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="neuesTicketSpalte"> 
 
    
 
    <div class="panelNeu" title="Erstelle schnell ein neues Ticket"> 
 
     <p class="textNeuesTicket" style="font-size:5.0em; margin:auto auto;display: inline-block;">Neues Ticket 
 
     </p> 
 
    </div> 
 

 
</div>

出典

2017-06-21 Captai-N

あなたは、関連するHTMLを追加し、それを回すためにとても親切だろう実行可能なスタックスニペットに？そのためのエディタボタンがあります。 – domsson

try 'transition：すべて1s ease;' – sTx

私の投稿@domdomを編集しました –

まずあなたのそのサイズのままになりますので、通常の状態にCSSプロパティボックスのサイズ変更を追加します。

第2すでにホバー状態に追加されているすべてのボーダープロパティを通常の状態にも追加します。

以下の作業バージョンコード、再編集は、それはあなたの目的のためにそこにある：

<style> 
 
.neuesTicketSpalte .panelNeu { 
 
    transition: border-left 1s ease; 
 
    width:500px; 
 
    height:100px; 
 
    background-color:#FFFF00; 
 
    box-sizing:border-box; 
 
    border-top: 50px solid transparent; 
 
    border-left: 0px solid transparent; 
 
    border-bottom: 50px solid transparent; 
 
    font-size: 0.3em; 
 
    line-height:0.3em; 
 
} 
 

 
.neuesTicketSpalte:hover .panelNeu { 
 
    display: inline-block; 
 
    border-top: 50px solid transparent; 
 
    border-left: 80px solid rgba(46, 143, 143, 1); 
 
    border-bottom: 50px solid transparent; 
 
    font-size: 0.3em; 
 
} 
 
</style> 
 

 
<body> 
 

 
\t <div class="neuesTicketSpalte"> 
 
    \t <div class="panelNeu"> 
 
     \t <p class="textNeuesTicket" style="font-size:5.0em; margin:auto auto;display: inline-block;">Neues Ticket 
 
     </p> 
 
     </div> 
 
    </div> 
 

 
</body>

出典

2017-06-21 13:46:37

あなたはborderに移行し、その後、両方のルールにborder-top、border-leftとborder-bottomプロパティを追加する必要がありますfont-sizeと同様です。また、インラインスタイルを削除してCSSルールに追加する必要があります。

はこちらをご覧ください：

$(function() { 
 

 
    $(".neuesTicketSpalte").hover(
 
    function() { 
 
     $(".textNeuesTicket").text("Erstelle ein neues Ticket"); 
 
    }, 
 
    function() { 
 
     $(".textNeuesTicket").text("Neues Ticket"); 
 
    } 
 
); 
 

 
});

.neuesTicketSpalte .panelNeu { 
 
    display: inline-block; 
 
    font-size: 5em; 
 
    border-top: 0 solid transparent; 
 
    border-left: 0 solid rgba(46, 143, 143, 1); 
 
    border-bottom: 0 solid transparent; 
 
    transition: border 1s ease, font-size 1s ease; 
 
} 
 

 
.neuesTicketSpalte:hover .panelNeu { 
 
    display: inline-block; 
 
    font-size: 1em; 
 
    border-top: 50px solid transparent; 
 
    border-left: 80px solid rgba(46, 143, 143, 1); 
 
    border-bottom: 50px solid transparent; 
 
    transition: border 1s ease, font-size 1s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="neuesTicketSpalte"> 
 
    <div class="panelNeu" title="Erstelle schnell ein neues Ticket"> 
 
     <p class="textNeuesTicket">Neues Ticket 
 
     </p> 
 
    </div> 
 
</div>

出典

2017-06-21 13:50:07 domsson

.neuesTicketSpalte .panelNeu { 
    transition: border-left 1s ease; 
    display: inline-block; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 0px solid; 
    font-size: 0.3em; 
} 

.neuesTicketSpalte:hover .panelNeu { 
    display: inline-block; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 80px solid rgba(46, 143, 143, 1); 
    font-size: 0.3em; 
}

あなただけのアニメーション化されたプロパティごとにデフォルトのスタイルを設定する必要があります。

出典

2017-06-21 13:50:49 user5014677

PURE CSSソリューション

あなたが実際に完全にJavaScriptをドロップすると、純粋なCSSを使用することができます。

.panelNeu{ 
 
    position:relative; 
 
    font-size:5em; 
 
    margin:auto; 
 
    display: block; 
 
    height:40px; 
 
    width:100%; 
 
    transition: border ease-in-out 0.2s; 
 
} 
 
.panelNeu{ 
 
    border: 0 solid transparent; 
 
} 
 
.panelNeu::before{ 
 
    content:'Neues Ticket'; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    height:100%; 
 
    width:100%; 
 
    display:block; 
 
} 
 
.neuesTicketSpalte:hover .panelNeu { 
 
    border-top: 50px solid transparent; 
 
    border-left: 80px solid rgba(46, 143, 143, 1); 
 
    border-bottom: 50px solid transparent; 
 
} 
 
.neuesTicketSpalte:hover .panelNeu::before { 
 
    content:'Erstelle ein neues Ticket'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="neuesTicketSpalte"> 
 
    <div class="panelNeu" title="Erstelle schnell ein neues Ticket"></div> 
 
</div>

出典

2017-06-21 14:06:25 Obsidian

CSSの移行は休暇中ではありません

答えて

関連する問題