मैं स्थानांतरित करने के लिए बटन बनाने की कोशिश कर रहा हूं। जैसे, जब मैं एक बटन पर क्लिक करता हूं, तो बटन को एनीमेशन के साथ एक स्थान से दूसरे स्थान पर जाना चाहिए।

यह मेरा कोड है:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
* @media screen and (max-width: 768px) {
}
@keyframes heading
{
    from {top:350px;}
    to   {top:300px;}
}
@keyframes quote
{
    from {top:290px}
    to {top: 240px}
}
@keyframes button
{
    from {opacity: 0}
    to {opacity: 1}
}
@keyframes mvbut
{
    from {top: 266px; right: 185px}
    to {top: 250px; right: 170px;}
}
.button
{
    background-color: white;
    color: black;
    padding: 16px 32px;
    text-align: center;
    font-size: 16px;
    transition-duration: 0.4s;
    cursor: pointer;
}
.button1
{
    background-color: white;
    color: black;
    border: 1px solid white;
    position: relative;
    top : 266px;
    right: 185px;
    border-radius: 30px 7px;
    display:block;
    margin: auto;
    opacity: 0;
    animation-name: button;
    animation-duration: 0.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
.button1:hover
{
    background-color: black;
    color: white;
}
.button3:click
{
    animation-name: mvbut;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.button2
{
    background-color: white;
    color: black;
    border: 1px solid white;
    position: relative;
    top : 210px;
    left: 0px;
    border-radius: 30px 7px;
    display:block;
    margin: auto;
    opacity: 0;
    animation-name: button;
    animation-duration: 0.5s;
    animation-delay: 2.3s;
    animation-fill-mode: forwards;
}
.button2:hover
{
    background-color: black;
    color: white;
}
.button3
{
    background-color: white;
    color: black;
    border: 1px solid white;
    position: relative;
    top : 154px;
    left: 185px;
    border-radius: 30px 7px;
    display:block;
    margin: auto;
    height: auto;
    opacity: 0;
    animation-name: button;
    animation-duration: 0.5s;
    animation-delay: 2.6s;
    animation-fill-mode: forwards;
}
.button3:hover
{
    background-color: black;
    color: white;
}
@font-face 
{
    font-family: beatsurge;
    src: url(neutronium.ttf);
}
p.border 
{
    border-style: solid;
    border-width: 2px;
    padding: 20px;
    position: absolute;
    border-radius: 50px 20px;
    position: absolute;
}
body
{
    background-image: url("background.jpg");
    background-repeat:no-repeat;
    background-size: cover;
}
h1
{
    color: white;
    font-family: beatsurge;
    font-size: 100px;
    text-align: center;
    top: 350px;
    left: 0px;
    position: relative;
    animation-name: heading;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;  

}
p
{
    font-size: 20px;
    text-align: center;
    color: white;
    position: relative;
    top: 290px;
    left: 0px;
    animation-name: quote;
    animation-duration: 1s;
    animation-delay: 1.25s;
    animation-fill-mode: forwards;
}
</style>
<title>Beat Surge</title>
</head>
<body>
<div><h1><strong>BEAT SURGE</strong></h1></div>
<p>
Where words fail, music speaks.
</p>
<button class = "button button1">Remixes</button>
<button class = "button button2">Original Content</button>
<button class = "button button3">About Us</button>
</body>
</html>

उदाहरण के लिए, जब मैं "रीमिक्स" पर क्लिक करता हूं, तो बटन नीचे बाएं कोने में जाना चाहिए।

0
PseudoDev 13 अप्रैल 2018, 20:41

3 जवाब

सबसे बढ़िया उत्तर
   function movebutton() {
        document.getElementById("button1").style.top = "400px";
        document.getElementById("button1").style.left = "30px";
    }
button{
  position: absolute;
  top:30px;
  left:400px;
  transition: 0.5s linear;
}
<html>
  <head>
    <title>Beat Surge</title>
  </head>
  <body>
    <button id = "button1" onclick="movebutton()">Remixes</button>
  </body>
</html>
1
JacopoDT 13 अप्रैल 2018, 21:19

आप इसे कई तरह से कर सकते हैं। एक सरल समाधान के लिए मैंने margin-left और एक साधारण toggleClass का उपयोग किया है

एक अन्य विकल्प पूर्ण स्थिति या jQuery एनिमेशन का उपयोग कर सकता है।

var _box = $('.box');

_box.on('click', function() {
  $(this).toggleClass('move');
});
.box {
  display: block;
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: 0.5s ease;
}

.box:hover {
  cursor: pointer;
}

.box.move {
  margin-left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box"></div>
1
StefanBob 13 अप्रैल 2018, 20:49

आपको वास्तव में अपने प्रश्न में अधिक जानकारी प्रदान करनी चाहिए, लेकिन: यदि मैं ऐसा कर रहा था, तो मैं बटन को एक क्लिक श्रोता फ़ंक्शन दूंगा जिसमें एक सीएसएस वर्ग जोड़ा गया था, और फिर तत्व प्लेसमेंट से निपटने के लिए सीएसएस का उपयोग करें। अपने एनिमेशन के लिए css ट्रांज़िशन का उपयोग करें।

document.querySelector('button').addEventListener('click', move);

function move(e) {
  e.target.classList.toggle('moved');
}
button {
  position: absolute;
  top: 40vh;
  left: 40vw;
  transition: all .2s;
}

.moved {
  top: 80vh;
  left: 4vw;
}
<button>Clicky</button>
0
wassona 13 अप्रैल 2018, 20:53