Переход CSS не работает при смене css из javascript

В основном я пытаюсь сделать всплывающие окна из элемента, на который они были нажаты, аналогично диалоговым окнам с угловым материалом here. Я знаю, как делать переходы, добавляя и удаляя классы, но как насчет того, когда вы хотите работать со стилями, которые вычисляются динамически и должны быть установлены через javascript. Кажется, это не работает.Переход CSS не работает при смене css из javascript

См plunkr

$(document).ready(function(){ 
 
    
 
    $(document).on("click", ".heading" , function(ev){ 
 
     var el = $(this); 
 
    
 
    var offset = el.offset(); 
 
    
 
    $(".popup").css("top", offset.top); 
 
    $(".popup").css("left", offset.left); 
 
    
 
    $(".popup").addClass("visible"); 
 
     }); 
 
    
 
    $(".close").on("click", function(ev){ 
 
     $(".popup").removeClass("visible"); 
 
     }); 
 
    });

.heading{ width:100px; height:40px; background-color:grey; margin:50px 0 150px 0; padding:10px; } 
 
    
 
    .popup{ 
 
    background-color:grey; 
 
    position:absolute; 
 
    height:0 
 
    width:0; opacity:0; 
 

 
    -webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
 

 
    transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s 
 
    ease-out, top 0.3s ease-out, left 0.3s ease-out; 
 

 
    -moz-transition: 
 
    opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 
 
    0.3s ease-out, left 0.3s ease-out; -ms-transition: opacity 0.5s ease-out,  width 0.3s ease-out, height 0.3s ease-out, top 0.3s 
 
    ease-out, left 0.3s ease-out; 
 

 
    -o-transition: opacity 0.5s ease-out, 
 
    width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 
 
    0.3s ease-out; } 
 

 
    .popup.visible{ opacity:1; height:250px; width:400px; 
 
     top:400px !important; left:200px !important; } 
 

 
    .close:hover{cursor:pointer;}

<html> 
 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="jquery" data-semver="3.0.0"  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
     <script src="script.js"></script> 
 
     </head> 
 

 
    <body> 
 
    <div class="heading">click me 1st </div> 
 
    <div class="heading">click me 2nd</div> 
 
    <div class="heading">click me 3rd</div> 
 
    
 
    
 
    <div class="popup"> 
 
     ttttttttttttttttttttttttttttttttttttttttttttttttttttttt 
 
     <div style="margin:40px" class="close">close</div> 
 
    </div> 
 
    </body> 
 
    </html>

Как это должно быть это переходит из DIV вы щелкнули, заканчивается в центре и при закрытии он переходит обратно DIV вы щелкнули ,

Способ, которым он на самом деле является: щелкнуть первый div, чтобы всплывающее окно отображалось там, где оно должно заканчиваться. После этого момента переход (верхний и нижний) всегда кажутся одним шагом назад. Если вы нажмете 2-й div, переход начинается с того места, где он заканчивался до того, как предыдущий div (что неправильно, он должен начинаться с выбранного вами div) и заканчивается посередине, что тоже правильно. Когда вы приближаетесь, он возвращается к правильному div.

Есть ли способ обойти это? Скажите двигателю обновить значения вручную или могут редактировать классы через javascritp? Любая помощь будет оценена по достоинству.

Благодаря

источник

2016-12-08 user2119597

Перехода в соответствии с Google является:

процесса или период перехода от одного состояния или состояний других.

Чтобы иметь переход, вы должны начать с одного состояния и изменить его в другое состояние. Тем не менее, состояние должно быть постепенным, а это значит, что вам нужно немного подождать после установки 1-го состояния.

При этом вы устанавливаете старт top и left, а затем переопределяете их немедленно, используя класс visible.

Примечание - Я немного изменил размеры, чтобы соответствовать области примеров SO. Вы можете найти пример с оригинальными размерами here.

$(".popup").css("left", offset.left); 

$(".popup").addClass("visible");

Чтобы предотвратить это, используйте задержку. Я использовал requestAnimationFrame.

Я также добавил очистку для настроек top и left после того, как всплывающее окно закрывается.

$(document).on("click", ".heading", function(ev) { 
 
    var offset = $(this).offset(); 
 
    var $popup = $(".popup"); 
 

 
    //set the starting point 
 
    $popup.css({ 
 
     top: offset.top, 
 
     left: offset.left, 
 
     visibility: 'visible' 
 
    }); 
 

 
    //wait and start the show animation 
 
    requestAnimationFrame(function() { 
 
     $popup.addClass("visible"); 
 
    }); 
 
    }); 
 

 
    $(".close").on("click", function(ev) { 
 
    var $popup = $(".popup"); 
 

 
    $popup 
 
    //only when the hide animation ends we reset the popup 
 
     .one('transitionend', function() { 
 
     $popup.css({ 
 
      top: '', 
 
      left: '', 
 
      visibility: 'hidden' 
 
     }); 
 
     }) 
 
     //start the hide animation 
 
     .removeClass("visible"); 
 
    });

h1 { 
 
    color: red; 
 
} 
 
.heading { 
 
    width: 100px; 
 
    height: 40px; 
 
    background-color: grey; 
 
    margin: 50px 0; 
 
    padding: 10px; 
 
} 
 
.popup { 
 
    background-color: grey; 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    -webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
 
    transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
 
    -moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
 
    -ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
 
    -o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
 
} 
 
.popup.visible { 
 
    opacity: 1; 
 
    height: 150px; 
 
    width: 200px; 
 
    top: calc(50% - 75px) !important; 
 
    left: calc(50% - 100px) !important; 
 
} 
 
.close:hover { 
 
    cursor: pointer; 
 
}

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

 
<div class="heading">heading 1</div> 
 
<div class="heading">heading 2</div> 
 
<div class="heading">heading 3</div> 
 

 

 
<div class="popup"> 
 
    rghe;roigegrh'ragjh oewighe ergj ergj rrgj ger[ 
 
    <div style="margin:40px" class="close">close</div> 
 
</div>

источник

2016-12-08 08:01:27

Это сделал трюк, я наткнулся на этой проблеме ранее, но пошел с меньшими решениями. Теперь я знаю лучше! – user2119597

Хорошо. Это был интересный вопрос. Мой jQuery немного ржавый :) –

использования нижеуказанного CSS код

.heading { 
    width: 100px; 
    height: 40px; 
    background-color: grey; 
    margin: 50px 0 150px 0; 
    padding: 10px; 
} 
.popup { 
    background-color: grey; 
    position: absolute; 
    height: 0; 
    width: 0; 
    opacity: 0; 
    -webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
    transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
    -moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
    -ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
    -o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out; 
} 
.popup.visible { 
    opacity: 1; 
    height: 250px; 
    width: 400px; 
    top: 400px !important; 
    left: 200px !important; 
} 
.close:hover { 
    cursor: pointer; 
}

источник

2016-12-08 07:19:12

Переход CSS не работает при смене css из javascript

ответ

Смежные вопросы