2017-02-03 46 views
1

我想要向左移動這個div,就像動畫一樣平滑,然後我希望它通過動畫擴展到一個大小。我目前試圖嘗試的方式是使用類並在它們之間切換,單擊,它們的過渡屬性允許它進行動畫製作。讓它在擴展之前向左移動

基本上我正在努力讓元素移動,然後展開,它想要或者在同一時間做它們,或者當它重新點擊移動時展開。

我想單擊>移動>然後展開>然後重新單擊以將其全部撤消。 最好所有的JQuery

HTML:

<div class="box" id="box2"> 
    <h1 class="headline">BOX</h1> 
</div> 

CSS:

.box_clicked { 
    height: 500px; 
    width: 500px; 
    background-color: rgba(0, 0 , 0, 0.8); 
    transition: all 1s; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
} 
.box { 
    height: 200px; 
    width: 300px; 
    background-color: rgba(0, 0 , 0, 0.8); 
    position: relative; 
    transition: all 1s; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
} 

.move-left { 
    right: -100px; 
    background-color:red; 
} 

這裏是我的jsfiddle

謝謝!

回答

1

有沒有必要WR迭代大部分的JS代碼,我們只能用CSS3做一些技巧。 請務必記住,在使用任何屬性的轉換時,您必須定義初始值和最終值。 小提琴這是https://jsfiddle.net/dps6dwdv/1/

這裏是更新的代碼。

HTML

<div class="box" id="box2"> 
    <h1 class="headline">BOX</h1> 
</div> 

CSS

.box { 
    height: 200px; 
    width: 300px; 
    background-color: rgba(0, 0 , 0, 0.8); 
    position: relative; 
    left: 0px; 
    transition: left 1s,width 1s; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 

} 
.box.active{ 
    left : 20px; 
    width : 500px; 
} 

JS

$('#box2').click(function(){ 
    $('#box2').toggleClass("active"); 

}); 
+1

這是完美的,簡化了很多東西。謝謝你教我新東西! – Jiroscopes

+1

''toggleClass()'中不需要添加持續時間。這是不必要的,因爲它不包含持續時間參數。 –

+2

它爲我調整和移動。但是你說得很好,如果你設置了一個延遲,你可以通過轉換來完成。 '過渡:左1s,寬1s緩解1s;' – elvey

1

你可以用一個動畫做這一切的CSS

document.getElementById('button').addEventListener('click',function() { 
 
    document.getElementById('box2').classList.toggle('animate'); 
 
})
.box { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    position: relative; 
 
    height: 200px; 
 
    width: 300px; 
 
} 
 

 
input { 
 
    display: none; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
    text-decoration: underline; 
 
    color: #09c; 
 
} 
 

 
:checked ~ #box2, .animate { 
 
    animation: foo 5s forwards; 
 
} 
 

 
@keyframes foo { 
 
    50% { 
 
    transform: translateX(100px); 
 
    height: 200px; 
 
    width: 300px; 
 
    } 
 
    100% { 
 
    height: 500px; 
 
    width: 500px; 
 
    } 
 
}
<input type="checkbox" id="checkbox"><label for="checkbox">checkbox</label> <button id="button">javascript</button> 
 
<div class="box" id="box2"> 
 
    <h1 class="headline">BOX</h1> 
 
</div>

+0

這已經沒有事件偵聽器,需要將基於點擊 – Jiroscopes

+0

@Jiroscopes編輯我的答案,並增加了幾個方法來觸發動畫。複選框方法是全部CSS,而另一種方法使用JavaScript。 –

1

像這樣的事情

var bind = true 
 
$('#box2').click(function() { 
 
    $('#box2').toggleClass("box box_clicked"); 
 
}); 
 

 
$('#box2').click(function() { 
 
    if (bind) { 
 
    $('#box2').addClass("move-left"); 
 
    } 
 
    else $('#box2').removeClass("move-left"); 
 
    bind = !bind; 
 
});
.box_clicked { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -o-transition: all 1s; 
 
} 
 
.box { 
 
    height: 200px; 
 
    width: 300px; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    position: relative; 
 
    left: 0px; 
 
    transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    -o-transition: all 1s; 
 
} 
 
.move-left { 
 
    position: relative; 
 
    left: 100px; 
 
    background-color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box" id="box2"> 
 
    <h1 class="headline">BOX</h1> 
 
</div>

+0

這會工作,我怎麼才能使它恢復到原來的狀態時再次點擊? – Jiroscopes

+0

通過刪除課程,更新我的答案,檢查一次。 –

+0

啊我看,這太棒了!謝謝! – Jiroscopes

0

你可以做到這一點使用關鍵幀動畫。

var box = document.getElementById('box2'); 
 
box.addEventListener('click', function() { 
 
    box.classList.toggle('box_clicked'); 
 
});
@keyframes boxActivated { 
 
    50% { 
 
    transform: translateX(100px); 
 
    } 
 
    100% { 
 
    height: 500px; 
 
    width: 500px; 
 
    transform: translateX(100px); 
 
    } 
 
} 
 

 
.box { 
 
    height: 200px; 
 
    width: 300px; 
 
    right: 0; 
 
    background-color: rgba(0, 0 , 0, 0.8); 
 
    position: relative; 
 
} 
 

 
.box_clicked { 
 
    animation-name: boxActivated; 
 
    animation-duration: 4s; 
 
    animation-fill-mode: forwards; 
 
}
<div class="box" id="box2"> 
 
    <h1 class="headline">BOX</h1> 
 
    </div>

0

你期待這樣的事情?使用JQuery

var bind = true 
 

 

 

 
$('#box2').click(function() { 
 

 
    $('#box2').css({ 
 
    'right': '0px', 
 
    'left': '0px' 
 
    }).animate({ 
 
    'right': '150px' 
 
    }, function(){ $(this).addClass("box_clicked").css({'height':'100px'})}); 
 

 
    
 
}); 
 

 
$('#box2').click(function() { 
 
    if (bind) { 
 

 
    $('#box2').css({ 
 
     'right': '0px', 
 
     'left': '0px' 
 
    }).animate({ 
 
     'left': '150px' 
 
    },0, function(){ $(this).addClass("move-left").css({'height':'200px'})}); 
 
    } 
 
    bind = !bind; 
 
});
.box_clicked { 
 
height: 100px; 
 
width: 200px; 
 
background-color: rgba(0, 0 , 0, 0.8); 
 
transition: all 1s; 
 
-webkit-transition: all 1s; 
 
-moz-transition: all 1s; 
 
-o-transition: all 1s; 
 
} 
 
.box { 
 
height: 100px; 
 
width: 200px; 
 
background-color: rgba(0, 0 , 0, 0.8); 
 
position: relative; 
 
transition: all 1s; 
 
-webkit-transition: all 1s; 
 
-moz-transition: all 1s; 
 
-o-transition: all 1s; 
 

 
} 
 

 
.move-left { 
 
right: -100px; 
 
background-color:red; 
 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box" id="box2"> 
 
    <h1 class="headline">BOX</h1> 
 
</div>